simplify import paths

.babelrc.js

@@ -1,4 +1,4 @@
-const pathAliases = require('./pathAliases');
+const path = require('path');
 
 module.exports = {
   env: {
@@ -29,7 +29,9 @@ module.exports = {
       'module-resolver',
       {
         root: ['./'],
-        alias: pathAliases,
+        alias: {
+          '@/': path.resolve('./'),
+        },
       },
     ],
     'macros',

.eslintrc.js

@@ -120,11 +120,11 @@ module.exports = {
       },
     },
     {
-      files: ['components/nav.js', 'components/Footer/Footer.js'],
+      files: ['./components/nav.js', './components/Footer/Footer.js'],
       rules: { 'jsx-a11y/anchor-is-valid': 'off' },
     },
     {
-      files: ['components/UpdateProfileForm/**/*.js'],
+      files: ['./components/UpdateProfileForm/**/*.js'],
       rules: { 'react/sort-comp': 'off' },
     },
   ],
@@ -227,7 +227,7 @@ module.exports = {
         paths: [
           {
             name: 'react-select',
-            message: 'Please use `components/Form/Select/ThemedReactSelect` instead.',
+            message: 'Please use `@/components/Form/Select/ThemedReactSelect` instead.',
           },
           {
             name: 'prop-types',
@@ -237,7 +237,7 @@ module.exports = {
           {
             name: 'formik',
             importNames: ['Form'],
-            message: `Please use our Form component to have good defaults defined.\n "import { Form } from 'components/Form/Form';"`,
+            message: `Please use our Form component to have good defaults defined.\n "import { Form } from '@/components/Form/Form';"`,
           },
           {
             name: 'react',

.storybook/backgrounds.js

@@ -1,5 +1,5 @@
-import { brandColorsObject } from 'common/styles/styleExports';
-import { capitalizeFirstLetter } from 'common/utils/string-utils';
+import { brandColorsObject } from '@/common/styles/styleExports';
+import { capitalizeFirstLetter } from '@/common/utils/string-utils';
 
 const backgroundsPaletteArray = Object.keys(brandColorsObject).map(name => ({
   name: capitalizeFirstLetter(name),

.storybook/preview.js

@@ -1,5 +1,5 @@
 import backgroundsPalleteArray from './backgrounds';
-import 'common/styles/globals.css';
+import '@/common/styles/globals.css';
 import * as viewports from '@storybook/addon-viewport';
 
 export const decorators = [

common/constants/api.js

@@ -1,5 +1,5 @@
-import { get, post, patch, put, ResourcesAPI } from 'common/utils/api-utils';
-import { formatUserData } from 'common/utils/formatters';
+import { get, post, patch, put, ResourcesAPI } from '@/common/utils/api-utils';
+import { formatUserData } from '@/common/utils/formatters';
 
 /* GET REQUESTS */
 export const getUserPromise = ({ token }) => get('auth/user/', { token });

common/constants/partners.js

@@ -1,5 +1,5 @@
-import { s3 } from 'common/constants/urls';
 import sortBy from 'lodash/sortBy';
+import { s3 } from '@/common/constants/urls';
 
 export const PARTNER_TYPES = {
   PAID: 'PAID',

common/constants/successStories.js

@@ -1,4 +1,4 @@
-import { s3 } from 'common/constants/urls';
+import { s3 } from '@/common/constants/urls';
 
 export const successStories = [
   {

common/styles/breakpoints.js

@@ -1,5 +1,5 @@
-import { breakpointsObject } from 'common/styles/styleExports';
-import { getBreakpoints } from 'common/utils/style-utils';
+import { breakpointsObject } from '@/common/styles/styleExports';
+import { getBreakpoints } from '@/common/utils/style-utils';
 
 const breakpoints = getBreakpoints(Object.values(breakpointsObject));
 

common/styles/styleExports.ts

@@ -1,4 +1,4 @@
-import { isHexColor } from 'common/utils/style-utils';
+import { isHexColor } from '@/common/utils/style-utils';
 import * as themeMap from './themeMap';
 
 const themeMapValues = Object.entries(themeMap);
@@ -17,16 +17,13 @@ export const breakpointsObject: StyleObjectType = themeMapValues.reduce((object,
   return object;
 }, {} as StyleObjectType);
 
-export const brandColorsObject: StyleObjectType = themeMapValues.reduce(
-  (object, [key, value]) => {
-    if (isHexColor(value)) {
-      object[key] = value; // eslint-disable-line no-param-reassign
-    }
+export const brandColorsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => {
+  if (isHexColor(value)) {
+    object[key] = value; // eslint-disable-line no-param-reassign
+  }
 
-    return object;
-  },
-  {} as StyleObjectType,
-);
+  return object;
+}, {} as StyleObjectType);
 
 export const fontsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => {
   if (key.includes('Font')) {

common/utils/__tests__/api-utils.test.js

@@ -1,5 +1,5 @@
-import { getServerErrorMessage } from 'common/utils/api-utils';
-import { networkErrorMessages } from 'common/constants/messages';
+import { getServerErrorMessage } from '@/common/utils/api-utils';
+import { networkErrorMessages } from '@/common/constants/messages';
 
 describe('API Utilities', () => {
   describe('getServerErrorMessage', () => {

common/utils/api-utils.js

@@ -1,9 +1,9 @@
 import axios from 'axios';
 import lodashGet from 'lodash/get';
-import { networkErrorMessages } from 'common/constants/messages';
-import { apiUrl, resourcesAPIURL } from 'common/config/environment';
-import { setAuthorizationHeader } from 'common/utils/cookie-utils';
 import qs from 'qs';
+import { networkErrorMessages } from '@/common/constants/messages';
+import { apiUrl, resourcesAPIURL } from '@/common/config/environment';
+import { setAuthorizationHeader } from '@/common/utils/cookie-utils';
 
 const baseAxiosConfig = {
   baseURL: apiUrl,

common/utils/formatters.js

@@ -1,4 +1,4 @@
-import { isFilledArray } from 'common/utils/array-utils';
+import { isFilledArray } from '@/common/utils/array-utils';
 
 // TODO: Remove eslint disable when more items are exported
 /* eslint-disable import/prefer-default-export */

common/utils/thirdParty/gtag.js

@@ -1,5 +1,5 @@
 import snakeCase from 'lodash/snakeCase';
-import { clientTokens } from 'common/config/environment';
+import { clientTokens } from '@/common/config/environment';
 
 // TODO: Leverage prod-build-time-only env vars instead NODE_ENV for prod check
 const isProduction = process.env.NODE_ENV === 'production';

components/Accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import classNames from 'classnames';
 import Chevron from 'public/static/images/icons/FontAwesome/angle-right-solid.svg';
-import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from 'common/constants/testIDs';
+import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from '@/common/constants/testIDs';
 import { ScreenReaderOnly, toggleMessages } from '../ScreenReaderOnly/ScreenReaderOnly';
 import { Card } from '../Cards/Card/Card';
 import styles from './Accordion.module.css';

components/Accordion/__tests__/Accordion.test.tsx

@@ -4,7 +4,7 @@ import {
   ACCORDION_CONTENT,
   ACCORDION_TOGGLE_BUTTON,
   SCREEN_READER_ONLY,
-} from 'common/constants/testIDs';
+} from '@/common/constants/testIDs';
 import { toggleMessages } from '../../ScreenReaderOnly/ScreenReaderOnly';
 import meta, { Default } from '../__stories__/Accordion.stories';
 

components/Alert/Alert.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import { ALERT, ALERT_CLOSE_BUTTON } from 'common/constants/testIDs';
-import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly';
+import { ALERT, ALERT_CLOSE_BUTTON } from '@/common/constants/testIDs';
+import { ScreenReaderOnly } from '@/components/ScreenReaderOnly/ScreenReaderOnly';
 import styles from './Alert.module.css';
 
 export interface AlertPropsType {

components/Alert/__tests__/Alert.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
-import createSnapshotTest from 'test-utils/createSnapshotTest';
-import { ALERT_CLOSE_BUTTON } from 'common/constants/testIDs';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
+import { ALERT_CLOSE_BUTTON } from '@/common/constants/testIDs';
 import meta, { ErrorAlert, SuccessAlert, WarningAlert } from '../__stories__/Alert.stories';
 
 const ErrorAlertStory = composeStory(ErrorAlert, meta);

components/Badge/__tests__/Badge.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
-import createSnapshotTest from 'test-utils/createSnapshotTest';
-import Icon from 'static/images/icons/github_logo.svg';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
+import Icon from '@/public/static/images/icons/github_logo.svg';
 
 import { Badge } from '../Badge';
 

components/Branding/ColorSection/ColorSection.tsx

@@ -1,6 +1,6 @@
-import { brandColorsObject } from 'common/styles/styleExports';
-import { Swatch } from 'components/Branding/Swatch/Swatch';
-import { Content } from 'components/Content/Content';
+import { brandColorsObject } from '@/common/styles/styleExports';
+import { Swatch } from '@/components/Branding/Swatch/Swatch';
+import { Content } from '@/components/Content/Content';
 
 export function ColorSection() {
   const primaryColor = { name: 'Primary', hexCode: brandColorsObject.primary };

components/Branding/ColorSection/__tests__/ColorSection.test.tsx

@@ -1,4 +1,4 @@
-import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest';
 
 import { ColorSection } from '../ColorSection';
 

components/Branding/FontSection/FontSection.tsx

@@ -1,5 +1,5 @@
-import { Content } from 'components/Content/Content';
-import { fontsObject } from 'common/styles/styleExports';
+import { Content } from '@/components/Content/Content';
+import { fontsObject } from '@/common/styles/styleExports';
 
 export function FontSection() {
   // Every letter of the alphabet in one string

components/Branding/FontSection/__tests__/FontSection.test.tsx

@@ -1,4 +1,4 @@
-import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest';
 
 import { FontSection } from '../FontSection';
 

components/Branding/LogoSection/LogoSection.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { Badge } from 'components/Badge/Badge';
-import { Content } from 'components/Content/Content';
-import { s3 } from 'common/constants/urls';
+import { Badge } from '@/components/Badge/Badge';
+import { Content } from '@/components/Content/Content';
+import { s3 } from '@/common/constants/urls';
 import Image from 'next/legacy/image';
 import styles from './LogoSection.module.css';
 

components/Branding/LogoSection/__tests__/LogoSection.test.tsx

@@ -1,4 +1,4 @@
-import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest';
 
 import { LogoSection } from '../LogoSection';
 

components/Branding/Swatch/Swatch.tsx

@@ -1,5 +1,5 @@
 import { string } from 'prop-types';
-import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly';
+import { ScreenReaderOnly } from '@/components/ScreenReaderOnly/ScreenReaderOnly';
 
 Swatch.propTypes = {
   colorName: string.isRequired,

components/Branding/Swatch/__tests__/Swatch.test.tsx

@@ -1,4 +1,4 @@
-import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest';
 
 import { Swatch } from '../Swatch';
 

components/Buttons/Button/Button.tsx

@@ -1,8 +1,8 @@
 import noop from 'lodash/noop';
 import classNames from 'classnames';
-import { BUTTON } from 'common/constants/testIDs';
-import { gtag } from 'common/utils/thirdParty/gtag';
-import { getDataAttributes, getAriaAttributes } from 'common/utils/prop-utils';
+import { BUTTON } from '@/common/constants/testIDs';
+import { gtag } from '@/common/utils/thirdParty/gtag';
+import { getDataAttributes, getAriaAttributes } from '@/common/utils/prop-utils';
 import styles from './Button.module.css';
 
 interface GoogleAnalyticsEventPropType {

components/Buttons/Button/__tests__/Button.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from '@testing-library/react';
-import { BUTTON } from 'common/constants/testIDs';
-import { gtag } from 'common/utils/thirdParty/gtag';
-import createSnapshotTest from 'test-utils/createSnapshotTest';
+import { BUTTON } from '@/common/constants/testIDs';
+import { gtag } from '@/common/utils/thirdParty/gtag';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
 
 import { Button } from '../Button';
 

components/Buttons/CloseButton/CloseButton.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import { CLOSE_BUTTON } from 'common/constants/testIDs';
-import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly';
-import PlusIcon from 'static/images/icons/plus.svg';
+import { CLOSE_BUTTON } from '@/common/constants/testIDs';
+import { ScreenReaderOnly } from '@/components/ScreenReaderOnly/ScreenReaderOnly';
+import PlusIcon from '@/public/static/images/icons/plus.svg';
 import styles from './CloseButton.module.css';
 
 export type CloseButtonProps = {

components/Buttons/CloseButton/__tests__/CloseButton.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
-import { CLOSE_BUTTON } from 'common/constants/testIDs';
-import createSnapshotTest from 'test-utils/createSnapshotTest';
+import { CLOSE_BUTTON } from '@/common/constants/testIDs';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
 import { CloseButton } from '../CloseButton';
 
 describe('CloseButton', () => {

components/Buttons/LinkButton/LinkButton.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import Link from 'next/link';
-import { OutboundLink } from 'components/OutboundLink/OutboundLink';
+import { OutboundLink } from '@/components/OutboundLink/OutboundLink';
 import styles from '../Button/Button.module.css';
 
 export interface LinkButtonProps {

components/Buttons/LinkButton/__tests__/LinkButton.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
-import { gtag } from 'common/utils/thirdParty/gtag';
-import createSnapshotTest from 'test-utils/createSnapshotTest';
+import { gtag } from '@/common/utils/thirdParty/gtag';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
 import { LinkButton } from '../LinkButton';
 
 describe('LinkButton', () => {

components/Cards/Card/Card.tsx

@@ -1,5 +1,5 @@
 import { twMerge } from 'tailwind-merge';
-import { getDataAttributes } from 'common/utils/prop-utils';
+import { getDataAttributes } from '@/common/utils/prop-utils';
 
 export interface CardPropsType {
   children: React.ReactNode;

components/Cards/Card/__tests__/Card.test.tsx

@@ -1,4 +1,4 @@
-import createSnapshotTest from 'test-utils/createSnapshotTest';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
 import { Card } from '../Card';
 
 describe('Card', () => {

components/Cards/FlatCard/FlatCard.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { twMerge } from 'tailwind-merge';
 import Image from 'next/legacy/image';
-import { FLAT_CARD_IMAGE } from 'common/constants/testIDs';
-import { getPlaceholder } from 'common/utils/next-utils';
+import { FLAT_CARD_IMAGE } from '@/common/constants/testIDs';
+import { getPlaceholder } from '@/common/utils/next-utils';
 import { ReactNode } from 'react';
 
 interface FlatCardProps {

components/Cards/FlatCard/__tests__/FlatCard.test.js

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
-import createSnapshotTest from 'test-utils/createSnapshotTest';
-import { FLAT_CARD_IMAGE } from 'common/constants/testIDs';
-import { s3 } from 'common/constants/urls';
-import { LinkButton } from 'components/Buttons/LinkButton/LinkButton';
 import { FlatCard } from '../FlatCard';
+import createSnapshotTest from '@/test-utils/createSnapshotTest';
+import { FLAT_CARD_IMAGE } from '@/common/constants/testIDs';
+import { s3 } from '@/common/constants/urls';
+import { LinkButton } from '@/components/Buttons/LinkButton/LinkButton';
 
 describe('FlatCard', () => {
   const requiredProps = {

components/Cards/ImageCard/ImageCard.tsx

@@ -1,6 +1,6 @@
 import { twMerge } from 'tailwind-merge';
 import Image from 'next/legacy/image';
-import { Card, CardPropsType } from 'components/Cards/Card/Card';
+import { Card, CardPropsType } from '@/components/Cards/Card/Card';
 
 export type ImageCardPropsType = {
   /**

components/Cards/ImageCard/__tests__/ImageCard.test.tsx

@@ -1,4 +1,4 @@
-import createShallowSnapshotTest from 'test-utils/createShallowSnapshotTest';
+import createShallowSnapshotTest from '@/test-utils/createShallowSnapshotTest';
 import { ImageCard } from '../ImageCard';
 
 describe('ImageCard', () => {

components/Cards/ResourceCard/ResourceCard.tsx

@@ -1,18 +1,18 @@
 import { useState } from 'react';
 import classNames from 'classnames';
-import { Accordion } from 'components/Accordion/Accordion';
-import { OutboundLink } from 'components/OutboundLink/OutboundLink';
-import { ScreenReaderOnly } from 'components/ScreenReaderOnly/ScreenReaderOnly';
+import { Accordion } from '@/components/Accordion/Accordion';
+import { OutboundLink } from '@/components/OutboundLink/OutboundLink';
+import { ScreenReaderOnly } from '@/components/ScreenReaderOnly/ScreenReaderOnly';
 import {
   UPVOTE_BUTTON,
   UPVOTE_COUNT,
   DOWNVOTE_BUTTON,
   DOWNVOTE_COUNT,
   RESOURCE_CARD,
   RESOURCE_TITLE,
-} from 'common/constants/testIDs';
-import ThumbsUp from 'static/images/icons/FontAwesome/thumbs-up.svg';
-import ThumbsDown from 'static/images/icons/FontAwesome/thumbs-down.svg';
+} from '@/common/constants/testIDs';
+import ThumbsUp from '@/public/static/images/icons/FontAwesome/thumbs-up.svg';
+import ThumbsDown from '@/public/static/images/icons/FontAwesome/thumbs-down.svg';
 import styles from './ResourceCard.module.css';
 
 const DESKTOP_VOTING_BLOCK = 'desktopVotingBlock';