chore(deps): Upgrade NX to v16.8.x

Upgrade NX to v16.8.0

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     'gamut/prefer-themed': 'error',
     'gamut/no-css-standalone': 'error',
     'gamut/import-paths': 'error',
+    'import/no-extraneous-dependencies': 'off',
   },
 
   overrides: [
@@ -21,15 +22,6 @@ module.exports = {
         '@typescript-eslint/no-namespace': 'off',
       },
     },
-    {
-      files: ['**/jest/*'],
-      rules: {
-        'import/no-extraneous-dependencies': [
-          'error',
-          { devDependencies: true },
-        ],
-      },
-    },
     {
       files: ['*.mdx'],
       rules: {
@@ -54,7 +46,6 @@ module.exports = {
         '@typescript-eslint/no-unsafe-return': 'off',
         '@typescript-eslint/restrict-plus-operands': 'off',
         '@typescript-eslint/restrict-template-expressions': 'off',
-        'import/no-extraneous-dependencies': 'off',
       },
     },
   ],

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged --relative

.lintstagedrc.mjs

@@ -0,0 +1,36 @@
+import micromatch from 'micromatch';
+
+export default {
+  // Use custom function to avoid overlaps that could cause race conditions
+  [`*`]: (allChanges) => {
+    const commands = [];
+
+    // if (micromatch.some(allChanges, '**/package.json')) {
+    //   commands.push(`yarn syncpack format`);
+    // }
+
+    // if (micromatch.some(allChanges, 'yarn.lock')) {
+    //   commands.push(`npx yarn-deduplicate`);
+    // }
+
+    const eslintExtensions = `{mdx,ts,tsx,js,jsx,json}`;
+    const eslintFiles = micromatch(
+      allChanges,
+      [`**/*.${eslintExtensions}`, `?(.)**.${eslintExtensions}`],
+      { dot: true }
+    );
+
+    if (eslintFiles.length) {
+      commands.push(
+        `node_modules/@codecademy/eslint-config/bin/eslint-fix.js ${eslintFiles.join(
+          ' '
+        )}`
+      );
+    }
+
+    // Run nx format, which will run prettier
+    commands.push(`nx format:write --files ${allChanges}`);
+
+    return commands;
+  },
+};

.syncpackrc.js

@@ -0,0 +1,20 @@
+// @ts-check
+
+/** @type {import("syncpack").RcFile} */
+const config = {
+  dependencyTypes: ['prod', 'dev', 'resolution', 'local', 'overrides'],
+  source: ['package.json', 'packages/*/package.json'],
+  semverRange: '^',
+  sortAz: [
+    'contributors',
+    'dependencies',
+    'devDependencies',
+    'keywords',
+    'peerDependencies',
+    'resolutions',
+    'scripts',
+  ],
+  sortFirst: ['name', 'description', 'version', 'author'],
+};
+
+module.exports = config;

.yarnclean

@@ -6,7 +6,6 @@ powered-test
 
 # asset directories
 docs
-doc
 website
 images
 

babel.defaults.js

@@ -1,14 +1,15 @@
-let ignorePatterns = ['./**/*.d.ts'];
+let ignorePatterns = [];
 
 if (process.env.NODE_ENV !== 'test') {
   ignorePatterns = [
     ...ignorePatterns,
     '**/*.(test|spec).ts{,.snap}',
     '**/*.(test|spec).tsx',
-    '**/tests',
-    '**/__tests__',
-    '**/__mocks__',
-    '**/__fixtures',
+    '**/tests/**/*',
+    '**/__tests__/**/*',
+    '**/__mocks__/**/*',
+    '**/__fixtures__/**/*',
+    './**/*.d.ts',
   ];
 }
 

jest.config.base.ts

@@ -2,20 +2,14 @@ const baseConfig = (packageName: string, overrides: Object) => ({
   displayName: packageName,
   preset: '../../jest.preset.js',
   clearMocks: true,
-  verbose: true,
   coverageDirectory: process.env.CI
     ? `/tmp/test-results/jest/${packageName}`
     : `../../coverage/packages/${packageName}`,
-  reporters: process.env.CI
-    ? ['default', ['jest-junit', { outputName: `${packageName}-report.xml` }]]
-    : ['default'],
-  coverageReporters: ['json', 'text', 'clover'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|md)$':
       '<rootDir>/../../script/jest/fileMock',
     '\\.(css|scss)$': '<rootDir>/../../script/jest/styleMock',
   },
-  transformIgnorePatterns: ['./disable-transform-ignoring-for-node_modules'],
   testPathIgnorePatterns: ['node_modules', 'dist'],
   ...overrides,
 });

jest.config.ts

@@ -1,4 +1,4 @@
-import { getJestProjects } from '@nrwl/jest';
+import { getJestProjects } from '@nx/jest';
 
 export default {
   projects: getJestProjects(),

jest.preset.js

@@ -1,5 +1,14 @@
-const nxPreset = require('@nrwl/jest/preset').default;
+const nxPreset = require('@nx/jest/preset').default;
+const { kebabCase } = require('lodash');
+
+const targetProject = kebabCase(
+  process.env.NX_TASK_TARGET_PROJECT || 'unknown'
+);
 
 module.exports = {
   ...nxPreset,
+  coverageReporters: ['json', 'text', 'clover'],
+  reporters: process.env.CI
+    ? ['default', ['jest-junit', { outputName: `${targetProject}-report.xml` }]]
+    : ['default'],
 };

lerna.json

@@ -2,8 +2,6 @@
   "version": "independent",
   "npmClient": "yarn",
   "exact": true,
-  "useWorkspaces": true,
-  "useNx": true,
   "packages": ["packages/*"],
   "command": {
     "publish": {
@@ -13,5 +11,6 @@
     "version": {
       "changelogPreset": "conventionalcommits"
     }
-  }
+  },
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

nx.json

@@ -1,24 +1,7 @@
 {
-  "extends": "nx/presets/npm.json",
-  "affected": {
-    "defaultBase": "main"
-  },
-  "workspaceLayout": {
-    "appsDir": "packages",
-    "libsDir": "packages"
-  },
-  "implicitDependencies": {
-    "yarn.lock": "*",
-    "package.json": {
-      "dependencies": "*",
-      "devDependencies": "*"
-    },
-    "tsconfig.base.json": "*",
-    "nx.json": "*"
-  },
   "tasksRunnerOptions": {
     "default": {
-      "runner": "@nrwl/nx-cloud",
+      "runner": "nx-cloud",
       "options": {
         "cacheableOperations": ["build", "test", "verify", "build-storybook"],
         "parallel": 3,
@@ -27,31 +10,49 @@
       }
     }
   },
+  "extends": "nx/presets/npm.json",
+  "affected": {
+    "defaultBase": "main"
+  },
+  "workspaceLayout": {
+    "appsDir": "packages",
+    "libsDir": "packages"
+  },
   "namedInputs": {
+    "babelConfig": ["{workspaceRoot}/babel.defaults.js"],
     "default": ["{projectRoot}/**/*"],
-    "prod": [
+    "production": [
+      "default",
       "!{projectRoot}/**/*.(test|spec).ts{,.snap}",
-      "!{projectRoot}/**/__tests__/**/*"
+      "!{projectRoot}/**/__tests__/**/*",
+      "!{projectRoot}/**/__fixtures__/**/*"
     ]
   },
   "targetDefaults": {
     "build": {
       "dependsOn": ["^build"],
-      "inputs": ["prod", "^prod"]
+      "inputs": ["production", "^production", "babelConfig"]
+    },
+    "test": {
+      "dependsOn": ["^build"],
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/jest.preset.js",
+        "babelConfig"
+      ]
     }
   },
-  "cli": {
-    "defaultCollection": "@nrwl/react"
-  },
   "generators": {
     "@nrwl/js:library": {
       "buildable": true
     },
-    "@nrwl/react:library": {
+    "@nx/react:library": {
       "buildable": true,
       "publishable": true,
       "style": "@emotion/styled",
       "linter": "eslint"
     }
-  }
+  },
+  "$schema": "./node_modules/nx/schemas/nx-schema.json"
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gamut",
+  "name": "gamut-repo",
   "private": true,
   "description": "Modules and components for Codecademy",
   "version": "1.2.0",
@@ -24,7 +24,7 @@
     "build-all": "yarn build",
     "start": "yarn && yarn start:storybook",
     "start:storybook": "cd ./packages/styleguide && yarn start",
-    "build-storybook": "nx run @codecademy/styleguide:build-storybook && lerna run copy-storybook",
+    "build-storybook": "nx run styleguide:build-storybook && lerna run copy-storybook",
     "deploy": "cp -r ./dist/static/* ./dist/docs && gh-pages -b gh-pages -d dist"
   },
   "lint-staged": {
@@ -58,14 +58,12 @@
     "@codecademy/eslint-config": "8.0.0",
     "@codecademy/prettier-config": "^0.2.0",
     "@codecademy/tsconfig": "^0.2.0",
-    "@emotion/babel-plugin": "^11.10.5",
-    "@emotion/jest": "^11.3.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@nrwl/cli": "^14.5.2",
-    "@nrwl/jest": "^14.5.2",
-    "@nrwl/nx-cloud": "^14.3.0",
-    "@nrwl/react": "^14.5.2",
+    "@emotion/babel-plugin": "11.11.0",
+    "@emotion/jest": "^11.11.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@nx/jest": "16.8.1",
+    "@nx/react": "16.8.1",
     "@svgr/cli": "5.5.0",
     "@testing-library/dom": "^8.11.1",
     "@testing-library/jest-dom": "^5.16.1",
@@ -79,10 +77,10 @@
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/stylis": "^4.0.0",
+    "@types/stylis": "^4.2.0",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
     "@typescript-eslint/parser": "^5.15.0",
-    "babel-jest": "28.1",
+    "babel-jest": "29.6.4",
     "babel-plugin-macros": "3.0.1",
     "babel-preset-codecademy": "7.0.0",
     "component-test-setup": "^0.3.1",
@@ -94,36 +92,36 @@
     "eslint-plugin-gamut": "^2.0.0",
     "eslint-plugin-local-rules": "^1.1.0",
     "gh-pages": "^2.2.0",
-    "husky": "4.2.5",
+    "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
-    "jest": "^28.1",
-    "jest-environment-jsdom": "^28.1",
-    "jest-environment-jsdom-global": "2.0.4",
-    "jest-junit": "^12.0.0",
-    "lerna": "5.1.8",
-    "lint-staged": "10.4.0",
+    "jest": "29.6.4",
+    "jest-environment-jsdom": "29.6.4",
+    "jest-environment-jsdom-global": "4.0.0",
+    "jest-junit": "^16.0.0",
+    "lerna": "7.2.0",
+    "lint-staged": "14.0.1",
     "lodash": "^4.17.5",
+    "micromatch": "^4.0.5",
     "mutationobserver-shim": "^0.3.3",
-    "nx": "14.4.3",
+    "nx": "16.8.1",
+    "nx-cloud": "16.4.0",
     "prettier": "2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "6.1.0",
     "react-test-renderer": "^17.0.2",
     "svgo": "^1.3.2",
-    "ts-jest": "^28.0.7",
-    "ts-node": "^10.9.1",
+    "syncpack": "^10.9.3",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.1",
     "tslib": "2.4.0",
     "typescript": "5.1.3"
   },
   "resolutions": {
     "@typescript-eslint/utils": "^5.15.0"
   },
-  "husky": {
-    "skipCI": false,
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "onchange": "^7.0.2"
+  }
 }

packages/eslint-plugin-gamut/jest.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import base from '../../jest.config.base';
 
 export default base('eslint-plugin-gamut', {