chore: restructured frontend component structure

src/components/Analysis/AnalysisGameList.tsx

@@ -9,9 +9,8 @@ import {
 } from 'react'
 import { motion } from 'framer-motion'
 
-import Tournament from './Tournament'
+import { Tournament, UserGameList } from 'src/components'
 import { AnalysisListContext, GameControllerContext } from 'src/contexts'
-import UserGameList from './UserGameList'
 
 interface AnalysisGameListProps {
   currentId: string[] | null
@@ -34,7 +33,7 @@ interface AnalysisGameListProps {
   ) => Promise<void>
 }
 
-const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
+export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   currentId,
   currentMaiaModel,
   loadNewTournamentGame,
@@ -181,5 +180,3 @@ const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     </div>
   ) : null
 }
-
-export default AnalysisGameList

src/components/MovePlot/MovePlot.tsx → src/components/Analysis/MovePlot.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable import/named */
 import {
-  ResponsiveScatterPlot,
   ScatterPlotRawSerie,
+  ResponsiveScatterPlot,
   ScatterPlotTooltipProps,
 } from '@nivo/scatterplot'
 import { useCallback, useContext } from 'react'

src/components/PositionEvaluationContainer/PositionEvaluationContainer.tsx → src/components/Analysis/PositionEvaluationContainer.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { PositionEvaluation } from 'src/types'
 
 interface Props {

src/components/Analysis/Tournament.tsx

@@ -8,7 +8,7 @@ import {
 } from 'src/components/Icons/icons'
 import { AnalysisTournamentGame } from 'src/types'
 
-export default function Tournament({
+export const Tournament = ({
   id,
   index,
   currentId,
@@ -37,7 +37,7 @@ export default function Tournament({
     setCurrentMove: Dispatch<SetStateAction<number>>,
   ) => Promise<void>
   setCurrentMove: Dispatch<SetStateAction<number>>
-}) {
+}) => {
   const games = analysisTournamentList.get(id)
   const [sectionId, title] = id.split('---')
   const opened = openIndex == index

src/components/Analysis/UserGameList.tsx

@@ -28,7 +28,7 @@ interface Props {
   currentMaiaModel: string
 }
 
-export default function UserGameList({
+export const UserGameList = ({
   currentId,
   selected,
   setSelected,
@@ -41,7 +41,7 @@ export default function UserGameList({
   loadNewLichessGames,
   loadNewUserGames,
   currentMaiaModel,
-}: Props) {
+}: Props) => {
   return (
     <div className="flex w-full flex-col">
       <div className="grid select-none grid-cols-4 border-b-2 border-white border-opacity-10">

src/components/Analysis/index.ts

@@ -1 +1,8 @@
-export {}
+export * from './MovePlot'
+export * from './Tournament'
+export * from './BlunderMeter'
+export * from './UserGameList'
+export * from './AnalysisGameList'
+export * from './HorizontalEvaluationBar'
+export * from './PositionEvaluationContainer'
+export * from './VerticalEvaluationBar'

src/components/GameBoard/GameBoard.tsx → src/components/Board/GameBoard.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import Chessground from '@react-chess/chessground'
-import type { DrawShape } from 'chessground/draw'
 import { useCallback, useContext } from 'react'
-import { GameControllerContext } from 'src/contexts'
+import type { DrawShape } from 'chessground/draw'
+import Chessground from '@react-chess/chessground'
+
 import { BaseGame, Check } from 'src/types'
+import { GameControllerContext } from 'src/contexts'
 
 interface Props {
   game: BaseGame

src/components/GameClock/GameClock.tsx → src/components/Board/GameClock.tsx

@@ -1,6 +1,6 @@
-import { Color } from 'src/types'
 import { useState, useEffect, useContext } from 'react'
 
+import { Color } from 'src/types'
 import { AuthContext, ThemeContext } from 'src/contexts'
 import { PlayControllerContext } from 'src/contexts/PlayControllerContext'
 

src/components/GameplayInterface/GameplayInterface.tsx → src/components/Board/GameplayInterface.tsx

@@ -4,17 +4,22 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
 import {
   AuthContext,
-  GameControllerContext,
   ThemeContext,
   WindowSizeContext,
+  GameControllerContext,
 } from 'src/contexts'
-import { GameBoard, MovesContainer, BoardController } from 'src/components'
-import { GameInfo, ExportGame } from '../Core'
-import { GameClock } from '../GameClock'
+import {
+  GameInfo,
+  GameClock,
+  GameBoard,
+  ExportGame,
+  StatsDisplay,
+  MovesContainer,
+  BoardController,
+  PromotionOverlay,
+} from 'src/components'
 import { useGameController } from 'src/hooks'
-import { StatsDisplay } from '../StatsDisplay'
 import { useUnload } from 'src/hooks/useUnload'
-import { PromotionOverlay } from 'src/components/PromotionOverlay'
 import { PlayControllerContext } from 'src/contexts/PlayControllerContext/PlayControllerContext'
 
 interface Props {

src/components/PromotionOverlay/PromotionOverlay.tsx → src/components/Board/PromotionOverlay.tsx

@@ -3,7 +3,6 @@ import { useContext } from 'react'
 
 import { Color } from 'src/types'
 import { GameControllerContext } from 'src/contexts'
-import Chessground from '@react-chess/chessground'
 
 interface Props {
   player: Color

src/components/Board/index.ts

@@ -0,0 +1,6 @@
+export * from './GameClock'
+export * from './GameBoard'
+export * from './MovesContainer'
+export * from './BoardController'
+export * from './PromotionOverlay'
+export * from './GameplayInterface'

src/components/AuthenticatedWrapper/AuthenticatedWrapper.tsx → src/components/Core/AuthenticatedWrapper.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useContext } from 'react'
+
 import { AuthContext } from 'src/contexts'
 
 interface Props {

src/components/Compose/Compose.tsx → src/components/Core/Compose.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react'
-import { ErrorBoundary } from '../ErrorBoundary'
+
+import { ErrorBoundary } from './ErrorBoundary'
 
 interface Props {
   components: (React.FC<{ children: ReactNode }> | typeof ErrorBoundary)[]

src/components/Header/Header.tsx → src/components/Core/Header.tsx

@@ -3,11 +3,11 @@
 import Link from 'next/link'
 import Image from 'next/image'
 import { useRouter } from 'next/router'
-import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
 import { useCallback, useContext, useEffect, useState } from 'react'
 
-import { ThemeButton } from '../ThemeButton'
+import { ThemeButton } from 'src/components'
 import { AuthContext, ModalContext, WindowSizeContext } from 'src/contexts'
+import { MenuIcon, UserIcon, DiscordIcon } from 'src/components/Icons/icons'
 
 export const Header: React.FC = () => {
   const [showMenu, setShowMenu] = useState(false)

src/components/Core/index.ts

@@ -1,3 +1,8 @@
-export * from './GameInfo'
-export * from './ExportGame'
-export * from './ContinueAgainstMaia'
+export * from './Header'
+export * from './Footer'
+export * from './Compose'
+export * from './Loading'
+export * from './Markdown'
+export * from './ThemeButton'
+export * from './ErrorBoundary'
+export * from './AuthenticatedWrapper'

src/components/Home/index.ts

@@ -0,0 +1,2 @@
+export * from './HomeHero'
+export * from './AboutMaia'

src/components/Leaderboard/index.ts

@@ -0,0 +1 @@
+export * from './LeaderboardColumn'

src/components/Core/ExportGame.tsx → src/components/Misc/ExportGame.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react'
 import { Chess } from 'chess.ts'
+import { useEffect, useState } from 'react'
 
 import { Move } from 'src/types'
 

src/components/Core/GameInfo.tsx → src/components/Misc/GameInfo.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
 import { ModalContext } from 'src/contexts'
-import { InstructionsType } from 'src/components/modals/InstructionsModal'
+import { InstructionsType } from 'src/components'
 
 interface Props {
   icon: string

src/components/modals/InstructionsModal/InstructionsModal.tsx → src/components/Misc/InstructionsModal.tsx

@@ -2,9 +2,8 @@ import { useContext } from 'react'
 import { AnimatePresence } from 'framer-motion'
 
 import { ModalContext } from 'src/contexts'
-import { Markdown } from '../../Markdown'
-import { ModalContainer } from '../ModalContainer'
 import { CloseIcon } from 'src/components/Icons/icons'
+import { Markdown, ModalContainer } from 'src/components'
 
 export type InstructionsType =
   | 'againstMaia'

src/components/modals/PlaySetupModal/PlaySetupModal.tsx → src/components/Misc/PlaySetupModal.tsx

@@ -10,11 +10,8 @@ import {
   TimeControlOptionNames,
   TimeControlOptions,
 } from 'src/types'
-import bK from './bK.svg'
-import wK from './wK.svg'
-import wbK from './wbK.svg'
 import { ModalContext } from 'src/contexts'
-import { ModalContainer } from '../ModalContainer'
+import { ModalContainer } from './ModalContainer'
 import { CloseIcon } from 'src/components/Icons/icons'
 
 const maiaOptions = [
@@ -255,7 +252,11 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                 className="flex cursor-pointer select-none items-center justify-center rounded-sm border-none bg-background-2 p-2 text-center text-xl outline-none transition duration-200 hover:bg-human-4"
               >
                 <div className="relative h-16 w-16">
-                  <Image src={bK} fill={true} alt="" />
+                  <Image
+                    src="/assets/pieces/black king.svg"
+                    fill={true}
+                    alt=""
+                  />
                 </div>
               </button>
               <button
@@ -264,7 +265,11 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                 className="flex cursor-pointer select-none items-center justify-center rounded-sm border-none bg-background-2 p-4 text-center text-xl outline-none transition duration-200 hover:bg-human-4"
               >
                 <div className="relative h-20 w-20">
-                  <Image src={wbK} fill={true} alt="" />
+                  <Image
+                    alt=""
+                    fill={true}
+                    src="/assets/pieces/white black king.svg"
+                  />
                 </div>
               </button>
               <button
@@ -273,7 +278,11 @@ export const PlaySetupModal: React.FC<Props> = (props: Props) => {
                 className="flex cursor-pointer select-none items-center justify-center rounded-sm border-none bg-background-2 p-2 text-center text-xl outline-none transition duration-200 hover:bg-human-4"
               >
                 <div className="relative h-16 w-16">
-                  <Image src={wK} fill={true} alt="" />
+                  <Image
+                    src="/assets/pieces/white king.svg"
+                    fill={true}
+                    alt=""
+                  />
                 </div>
               </button>
             </div>

src/components/Misc/index.ts

@@ -0,0 +1,7 @@
+export * from './GameInfo'
+export * from './ExportGame'
+export * from './StatsDisplay'
+export * from './PlaySetupModal'
+export * from './ModalContainer'
+export * from './InstructionsModal'
+export * from './ContinueAgainstMaia'

src/components/HandBrainPlayControls/index.ts → src/components/Play/index.ts

@@ -1 +1,2 @@
+export * from './PlayControls'
 export * from './HandBrainPlayControls'

src/components/UserProfile/GameList.tsx → src/components/Profile/GameList.tsx

@@ -1,11 +1,11 @@
 import { motion } from 'framer-motion'
-import { AuthContext } from 'src/contexts'
 import React, { useState, useEffect, useContext } from 'react'
 
+import { AuthContext } from 'src/contexts'
 import { AnalysisWebGame } from 'src/types'
 import { getLichessGames, getAnalysisGameList } from 'src/api'
 
-export default function GameList() {
+export const GameList = () => {
   const { user } = useContext(AuthContext)
   const [selected, setSelected] = useState<'play' | 'hand' | 'brain' | 'pgn'>(
     'play',

src/components/UserProfile/UserProfile.tsx → src/components/Profile/UserProfile.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable import/named */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { useRouter } from 'next/router'
 import React, { useState, useEffect, useContext } from 'react'
 
@@ -13,12 +13,11 @@ import {
   TuringIcon,
   RegularPlayIcon,
 } from '../Icons/icons'
-import GameList from './GameList'
 import { getPlayerStats } from 'src/api'
+import { GameList, ProfileColumn } from 'src/components'
 import { AuthContext, WindowSizeContext } from 'src/contexts'
-import { ProfileColumn } from '../ProfileColumn/ProfileColumn'
 
-const UserProfile: React.FC = () => {
+export const UserProfile: React.FC = () => {
   const router = useRouter()
   const { user } = useContext(AuthContext)
   const { isMobile } = useContext(WindowSizeContext)
@@ -222,5 +221,3 @@ const UserProfile: React.FC = () => {
 
   return <>{isMobile ? mobileLayout() : desktopLayout()}</>
 }
-
-export default UserProfile

src/components/Profile/index.ts

@@ -0,0 +1,3 @@
+export * from './GameList'
+export * from './UserProfile'
+export * from './ProfileColumn'

src/components/Train/index.tsx → src/components/Training/index.ts

@@ -1 +1,2 @@
+export * from './Feedback'
 export * from './PuzzleLog'

src/components/TuringGames/TuringGames.tsx → src/components/Turing/TuringGames.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import classNames from 'classnames'
 import { useContext } from 'react'
 import { TuringControllerContext } from 'src/contexts'
 

src/components/TuringSubmission/index.ts → src/components/Turing/index.ts

@@ -1 +1,2 @@
+export * from './TuringGames'
 export * from './TuringSubmission'