upgrade to Next v13

.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',

.circleci/config.yml

@@ -6,7 +6,8 @@ orbs:
 executors:
   default:
     docker:
-      - image: cypress/browsers:node18.12.0-chrome107 # keep in sync with .nvmrc and any other executors
+      # keep in sync with .nvmrc and any other executors
+      - image: cypress/browsers:node-18.20.3-chrome-125.0.6422.141-1-ff-126.0.1-edge-125.0.2535.85-1
     environment:
       CC_TEST_REPORTER_ID: 0f2bc6ef737019bfc8eda369cd06b66c54606b144b4d81cec010fb494d2559af
 

.eslintrc.js

@@ -75,12 +75,14 @@ module.exports = {
             format: ['PascalCase', 'UPPER_CASE'],
             prefix: [
               'is',
+              'are',
               'was',
               'should',
               'has',
               'can',
               'did',
               'will',
+              'ARE_',
               'IS_',
               'WAS_',
               'SHOULD_',
@@ -97,6 +99,33 @@ module.exports = {
         '@typescript-eslint/unbound-method': 'off', // gives false negatives in arrow funcs
       },
     },
+    {
+      files: ['./**/*.test.ts', './**/*.test.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: true,
+      },
+      extends: ['plugin:@typescript-eslint/strict', 'plugin:@typescript-eslint/stylistic'],
+      rules: {
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/ban-ts-comment': 'off',
+      },
+    },
+    {
+      files: [
+        'test-utils/**/*.js',
+        'test-utils/**/*.ts',
+        'test-utils/**/*.tsx',
+        'pages/**/*.tsx',
+        'pages/**/*.js',
+        '**/*.stories.tsx',
+        '**/*.stories.js',
+        './cypress.config.ts',
+      ],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
     {
       files: ['cypress/**/*.js'],
       rules: {
@@ -118,11 +147,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' },
     },
   ],
@@ -131,7 +160,14 @@ module.exports = {
     'import/extensions': [
       'error',
       'never',
-      { css: 'always', jpg: 'always', json: 'always', png: 'always', svg: 'always' },
+      {
+        css: 'always',
+        jpg: 'always',
+        json: 'always',
+        png: 'always',
+        svg: 'always',
+        stories: 'always',
+      },
     ],
     'import/no-unresolved': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
@@ -140,6 +176,7 @@ module.exports = {
       { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] },
     ],
     'import/prefer-default-export': 'off',
+    'import/no-default-export': 'error',
 
     // OC eslint Plugin Rules
     '@operation_code/custom-rules/proptype-definition-above-fn': 'error',
@@ -225,7 +262,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',
@@ -235,7 +272,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',

.github/workflows/chromatic.yml

@@ -13,27 +13,23 @@ jobs:
 
     steps:
       - name: Begin CI...
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - name: Read .nvmrc
-        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
-        id: nvm
-
       - name: Use Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           always-auth: true
           registry-url: https://registry.npmjs.org
-          node-version: '${{ steps.nvm.outputs.NVMRC }}'
+          node-version-file: '.nvmrc'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
 
       - name: Use cached node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -45,9 +41,12 @@ jobs:
         run: yarn install --frozen-lockfile --non-interactive
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          autoAcceptChanges: main
+          autoAcceptChanges: "main"
           token: ${{ secrets.GITHUB_TOKEN }}
           buildScriptName: storybook:build
+          onlyChanged: true
+          exitZeroOnChanges: true
+          exitOnceUploaded: true

.nvmrc

@@ -1 +1 @@
-18
+18.20.3

.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/main.ts

@@ -1,5 +1,6 @@
 const svgoConfig = require('../common/config/svgo');
 import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
 
 const config: StorybookConfig = {
   stories: [
@@ -16,6 +17,10 @@ const config: StorybookConfig = {
     },
   ],
   webpackFinal: async config => {
+    if (config.resolve?.alias) {
+      config.resolve.alias['@'] = path.resolve(__dirname, '../');
+    }
+
     // Find the Storybook Webpack rule relevant to SVG files.
     // @ts-expect-error => 'config.module' is possibly 'undefined'.ts(18048)
     const imageRule = config.module.rules.find(rule => {

.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',
@@ -105,4 +105,4 @@ const partners = [
   },
 ];
 
-export default sortBy(partners, 'name');
+export const sortedPartners = sortBy(partners, 'name');

common/constants/successStories.js

@@ -1,6 +1,6 @@
-import { s3 } from 'common/constants/urls';
+import { s3 } from '@/common/constants/urls';
 
-const successStories = [
+export const successStories = [
   {
     title: 'Ali Cipolla-Taylor, Talent Acquisition at Microsoft',
     quote:
@@ -20,5 +20,3 @@ const successStories = [
     imageSource: `${s3}headshots/jose.jpg`,
   },
 ];
-
-export default successStories;

common/styles/styleExports.ts

@@ -1,11 +1,9 @@
-import { isHexColor } from 'common/utils/style-utils';
 import * as themeMap from './themeMap';
+import { isHexColor } from '@/common/utils/style-utils';
 
 const themeMapValues = Object.entries(themeMap);
 
-type StyleObjectType = {
-  [key: string]: string;
-};
+type StyleObjectType = Record<string, string>;
 
 export const breakpointsObject: StyleObjectType = themeMapValues.reduce((object, [key, value]) => {
   const isBreakpoint = key.includes('ViewportWidth');
@@ -17,16 +15,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';