Refactor to use alias

jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(scss|sass|css)$': 'identity-obj-proxy',
     '^@/(.*)': ['<rootDir>/src/$1'],
+    '^@openapi': ['<rootDir>/openapi'],
   },
   testEnvironment: 'jsdom',
   transform: {

src/components/data-points/data-points.tsx

@@ -11,12 +11,12 @@ import {
   DataPointTypeValue,
   ScoreVariableType,
 } from '@/types/common'
-import { EditableTable } from '../editable-table/editable-table'
+import { EditableTable } from '@/components/editable-table/editable-table'
 import SwapVertIcon from '@mui/icons-material/SwapVert'
-import { TitleCard } from '../title-card/title-card'
+import { TitleCard } from '@/components/title-card/title-card'
 import useStyles from './data-points.style'
-import DownloadCSVButton from '../download-csv-button'
-import UploadCSVButton from '../upload-csv-button'
+import DownloadCSVButton from '@/components/download-csv-button'
+import UploadCSVButton from '@/components/upload-csv-button'
 import { dataPointsReducer, DataPointsState } from './data-points-reducer'
 
 type DataPointProps = {

src/components/editable-table/editable-table-cell.style.ts

@@ -1,5 +1,5 @@
 import { makeStyles } from '@mui/styles'
-import { tableBorder } from '../../theme/theme'
+import { tableBorder } from '@/theme/theme'
 
 export const useStyles = makeStyles(() => ({
   editCell: {

src/components/editable-table/editable-table-collapsed-row.style.ts

@@ -1,5 +1,5 @@
 import { makeStyles } from '@mui/styles'
-import { colors, tableBorder } from '../../theme/theme'
+import { colors, tableBorder } from '@/theme/theme'
 
 export const useStyles = makeStyles(() => ({
   buttonContainer: {

src/components/editable-table/editable-table-expanded-row.style.ts

@@ -1,5 +1,5 @@
 import { makeStyles } from '@mui/styles'
-import { colors } from '../../theme/theme'
+import { colors } from '@/theme/theme'
 
 export const useStyles = makeStyles(() => ({
   row: {

src/components/editable-table/editable-table.style.ts

@@ -1,5 +1,5 @@
 import { makeStyles } from '@mui/styles'
-import { tableBorder } from '../../theme/theme'
+import { tableBorder } from '@/theme/theme'
 
 export const useStyles = makeStyles(() => ({
   emptyCell: {

src/components/experiment/configurationTab.tsx

@@ -6,9 +6,9 @@ import {
   CategoricalVariableType,
   OptimizerConfig,
 } from '@/types/common'
-import Details from '../details'
-import OptimizerModel from '../input-model/optimizer-model'
-import OptimizerConfigurator from '../optimizer-configurator'
+import Details from '@/components/details'
+import OptimizerModel from '@/components/input-model/optimizer-model'
+import OptimizerConfigurator from '@/components/optimizer-configurator'
 import { selectAdvancedConfiguration } from '@/context/global/global-selectors'
 
 export const ConfigurationTab = () => {

src/components/experiment/dataEntryTab.tsx

@@ -1,8 +1,8 @@
 import { Grid } from '@mui/material'
 import { useExperiment } from '@/context/experiment'
 import { DataPointType } from '@/types/common'
-import DataPoints from '../data-points/data-points'
-import { ExperimentationGuide } from '../result-data/experimentation-guide'
+import DataPoints from '@/components/data-points/data-points'
+import { ExperimentationGuide } from '@/components/result-data/experimentation-guide'
 
 export const DataEntryTab = () => {
   const {

src/components/experiment/experiment.tsx

@@ -8,12 +8,12 @@ import {
   Switch,
   Typography,
 } from '@mui/material'
-import Layout from '../layout/layout'
-import OptimizerModel from '../input-model/optimizer-model'
-import OptimizerConfigurator from '../optimizer-configurator'
+import Layout from '@/components/layout/layout'
+import OptimizerModel from '@/components/input-model/optimizer-model'
+import OptimizerConfigurator from '@/components/optimizer-configurator'
 import { Alert } from '@mui/material'
-import Details from '../details'
-import DataPoints from '../data-points/data-points'
+import Details from '@/components/details'
+import DataPoints from '@/components/data-points/data-points'
 import { useStyles } from './experiment.style'
 import { useExperiment, runExperiment, useSelector } from '@/context/experiment'
 import React, { useState } from 'react'
@@ -24,9 +24,9 @@ import {
   DataPointType,
 } from '@/types/common'
 import LoadingExperiment from './loading-experiment'
-import { ExperimentationGuide } from '../result-data/experimentation-guide'
-import LoadingButton from '../loading-button/loading-button'
-import { Plots } from '../plots/plots'
+import { ExperimentationGuide } from '@/components/result-data/experimentation-guide'
+import LoadingButton from '@/components/loading-button/loading-button'
+import { Plots } from '@/components/plots/plots'
 import { saveObjectToLocalFile } from '@/utility/save-to-local-file'
 import { useGlobal } from '@/context/global'
 import { UISizeValue } from '@/context/global'

src/components/experiment/loading-experiment.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from '@mui/material'
 import useStyles from './loading-experiment.style'
-import Layout from '../layout/layout'
+import Layout from '@/components/layout/layout'
 
 export default function LoadingExperiment() {
   const classes = useStyles()

src/components/experiment/tabbed-experiment.tsx

@@ -8,15 +8,15 @@ import {
   Tab,
   Typography,
 } from '@mui/material'
-import Layout from '../layout/layout'
+import Layout from '@/components/layout/layout'
 import { Alert } from '@mui/material'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { useStyles } from './experiment.style'
 import { useExperiment, runExperiment, useSelector } from '@/context/experiment'
 import React, { useState } from 'react'
 import LoadingExperiment from './loading-experiment'
-import LoadingButton from '../loading-button/loading-button'
-import { Plots } from '../plots/plots'
+import LoadingButton from '@/components/loading-button/loading-button'
+import { Plots } from '@/components/plots/plots'
 import { saveObjectToLocalFile } from '@/utility/save-to-local-file'
 import { useGlobal } from '@/context/global'
 import { ConfigurationTab } from './configurationTab'

src/components/home/home.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mui/material'
 import { MouseEvent, useCallback, useReducer, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
-import Layout from '../layout/layout'
+import Layout from '@/components/layout/layout'
 import useStyles from './home.style'
 import { NextRouter, useRouter } from 'next/router'
 import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt'
@@ -24,7 +24,7 @@ import { ExperimentType } from '@/types/common'
 import { useGlobal } from '@/context/global'
 import { v4 as uuid } from 'uuid'
 import { reducer } from './home-reducer'
-import { CreateOrOverwriteDialog } from '../create-or-overwrite-dialog/create-or-overwrite-dialog'
+import { CreateOrOverwriteDialog } from '@/components/create-or-overwrite-dialog/create-or-overwrite-dialog'
 
 type UploadMessage = {
   message: string

src/components/input-model/optimizer-model.tsx

@@ -13,7 +13,7 @@ import { CategoricalVariableType, ValueVariableType } from '@/types/common'
 import DeleteIcon from '@mui/icons-material/Delete'
 import VariableEditor from './variable-editor'
 import useStyles from './optimizer-model.style'
-import { TitleCard } from '../title-card/title-card'
+import { TitleCard } from '@/components/title-card/title-card'
 import LensIcon from '@mui/icons-material/Lens'
 import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye'
 

src/components/layout/layout.tsx

@@ -10,7 +10,7 @@ import {
 import Link from 'next/link'
 import useStyles from './layout.style'
 import { useGlobal } from '@/context/global'
-import { VersionInfo } from '../version-info'
+import { VersionInfo } from '@/components/version-info'
 import { useState } from 'react'
 
 interface Props {

src/components/plots/plots.tsx

@@ -1,6 +1,6 @@
 import { useExperiment } from '@/context/experiment'
 import useStyles from './plots.style'
-import { TitleCard } from '../title-card/title-card'
+import { TitleCard } from '@/components/title-card/title-card'
 import { Tooltip, IconButton, Hidden } from '@mui/material'
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'
 import { useGlobal } from '@/context/global'

src/components/result-data/experimentation-guide.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from '@/context/experiment'
 import { Suggestions } from './suggestions'
-import { TitleCard } from '../title-card/title-card'
+import { TitleCard } from '@/components/title-card/title-card'
 import { Tooltip, IconButton, Hidden, Box } from '@mui/material'
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'
 import { useGlobal } from '@/context/global'

src/components/theme-selector/theme-selector.tsx

@@ -1,7 +1,7 @@
 import { Box, Button } from '@mui/material'
 import { useGlobal } from '@/context/global'
 import useStyles from './theme-selector.style'
-import { themes } from '../../theme/theme'
+import { themes } from '@/theme/theme'
 
 export default function ThemeSelector() {
   const classes = useStyles()

src/context/experiment/experiment-context.test.tsx

@@ -6,7 +6,7 @@ import {
   ExperimentProvider,
   useSelector,
 } from './experiment-context'
-import { GlobalStateProvider } from '../global'
+import { GlobalStateProvider } from '@/context/global'
 
 const ExperimentWrapper: FC<{ children: React.ReactNode }> = ({ children }) => (
   <GlobalStateProvider>

src/context/experiment/experiment-context.tsx

@@ -5,13 +5,13 @@ import {
   Configuration,
   DefaultApi,
   OptimizerapiOptimizerRunRequest,
-} from '../../../openapi'
+} from '@openapi'
 import { Dispatch, rootReducer } from './reducers'
 import { initialState, State } from '@/context/experiment/store'
 import { ExperimentResultType, ExperimentType } from '@/types/common'
 import { calculateData, calculateSpace } from '@/utility/converters'
 import { migrate } from '@/utility/migration/migration'
-import { useGlobal } from '../global/'
+import { useGlobal } from '@/context/global/'
 
 const ExperimentContext = React.createContext<
   { state: State; dispatch: Dispatch; loading: boolean } | undefined

src/context/global/global-context.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react'
 import { FC } from 'react'
 import { State } from '@/context/global'
-import { GlobalStateProvider, useGlobal, useSelector } from '../global'
+import { GlobalStateProvider, useGlobal, useSelector } from '@/context/global'
 
 const GlobalWrapper: FC<{ children: React.ReactNode }> = ({ children }) => (
   <GlobalStateProvider>{children}</GlobalStateProvider>

src/context/global/global-context.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import ThemeSelector from '@/components/theme-selector/theme-selector'
 import { useLocalStorageReducer } from '@/hooks/useLocalStorageReducer'
 import { State, Dispatch, initialState, reducer } from './global-reducer'
-import { theme, themes, CustomTheme } from '../../theme/theme'
+import { theme, themes, CustomTheme } from '@/theme/theme'
 
 declare module '@mui/styles/defaultTheme' {
   interface DefaultTheme extends Theme {}

src/context/global/global-reducer.test.ts

@@ -1,4 +1,4 @@
-import { ThemeName } from '../../theme/theme'
+import { ThemeName } from '@/theme/theme'
 import { initialState, reducer, State, UISizeValue } from './global-reducer'
 
 const initState = initialState

src/context/global/global-reducer.ts

@@ -1,4 +1,4 @@
-import { ThemeName } from '../../theme/theme'
+import { ThemeName } from '@/theme/theme'
 import produce from 'immer'
 import { assertUnreachable } from '@/utility'
 

src/utility/converters.ts

@@ -1,4 +1,4 @@
-import { ExperimentData } from '../../openapi'
+import { ExperimentData } from '@openapi'
 import {
   CategoricalVariableType,
   DataPointType,

tsconfig.json

@@ -23,7 +23,7 @@
     "noUncheckedIndexedAccess": true,
     "strictNullChecks": true,
     "baseUrl": ".",
-    "paths": { "@/*": ["./src/*"] }
+    "paths": { "@/*": ["./src/*"], "@openapi": ["./openapi"] }
   },
   "include": ["next-env.d.ts", "global-fetch.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]