chore(805): nx and rspack on existing project structure (#847)

* chore(805): nx and rspack on existing project structure

---------

Co-authored-by: JohnTParsons <JohnTParsons>

.circleci/config.yml

@@ -604,14 +604,14 @@ jobs:
           <<: *slack_notify
 
   test_unit_comps:
-    executor: node-large
+    executor: node-xlarge
     steps:
       - checkout
       - attach_workspace:
           at: ~/project
       - run:
           name: Unit Testing
-          command: make unit_test_comps
+          command: yarn test:unit:comps:ci
           environment:
             JEST_JUNIT_OUTPUT_DIR: ./reports/junit/
       - store_test_results:
@@ -629,7 +629,7 @@ jobs:
           at: ~/project
       - run:
           name: Unit Testing
-          command: make unit_test_docs
+          command: yarn test:unit:docs:ci
           environment:
             JEST_JUNIT_OUTPUT_DIR: ./reports/junit/
       - run:

.eslintrc.base.json

@@ -0,0 +1,94 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "settings": {
+    "next": {
+      "rootDir": "site/"
+    }
+  },
+  "env": {
+    "jest": true
+  },
+  "globals": {
+    "page": true,
+    "browser": true,
+    "context": true,
+    "cy": true,
+    "Cypress": true,
+    "window": true
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": "off",
+        "eslint-comments/no-unused-disable": "off"
+      }
+    },
+    {
+      "files": ["*.tsx"],
+      "extends": ["plugin:@next/next/recommended"],
+      "rules": {
+        "react/prop-types": "off",
+        "react/forbid-prop-types": "error",
+        "react-hooks/exhaustive-deps": "warn",
+        "react/jsx-props-no-spreading": "off",
+        "react/require-default-props": "off",
+
+        "react/jsx-no-useless-fragment": "off",
+        "react-hooks/rules-of-hooks": "warn",
+        "react/display-name": "off",
+        "react/jsx-key": "off"
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript", "plugin:prettier/recommended", "prettier"],
+      "rules": {
+        "no-undef": "off",
+        "no-var": "off",
+        "no-console": "warn",
+        "func-names": "warn",
+
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-this-alias": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/no-unused-expressions": "warn",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
+        "@typescript-eslint/no-var-require": "off",
+        "@typescript-eslint/no-var-requires": "off",
+
+        "prettier/prettier": [
+          "error",
+          {
+            "singleQuote": true,
+            "trailingComma": "all",
+            "bracketSpacing": false,
+            "arrowParens": "avoid"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {
+        "no-undef": "off"
+      }
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.test.js", "*.test.jsx"],
+      "env": {
+        "jest": true
+      },
+      "rules": {
+        "no-var": "off"
+      }
+    }
+  ]
+}

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "extends": [
+    "plugin:@nrwl/nx/react-typescript",
+    "plugin:@nrwl/nx/react",
+    "plugin:storybook/recommended",
+    "./.eslintrc.base.json"
+  ],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

.storybook/addons/tealium/register.js

@@ -65,8 +65,7 @@ const Tool = () => {
   });
 
   return (
-    <>
-      <NewsKitProvider theme={newskitLightTheme}>
+    <NewsKitProvider theme={newskitLightTheme}>
         <ConsentSettingsLink
           privacyManagerId={CONFIG.privacyManagerId}
           gdpr
@@ -87,7 +86,6 @@ const Tool = () => {
           </span>
         </Tooltip>
       </NewsKitProvider>
-    </>
   );
 };
 

.storybook/manager.js

@@ -1,4 +1,3 @@
-import React from "react";
 import {addons} from '@storybook/addons';
 import storybookTheme from './storybook-theme';
 

.storybook/preview.js

@@ -88,6 +88,7 @@ export const parameters = {
   docs: {
     // We create a custom Docs page, using of our components for the header
     page: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
       const docsContext = React.useContext(DocsContext);
       return (
         <ThemeProvider theme={newskitLightTheme}>

Makefile

@@ -34,12 +34,6 @@ build_docs:
 build_docs_with_no_base_url:
 	SITE_ENV=${SITE_ENV} yarn build:docs && yarn postbuild:docs
 
-unit_test_docs:
-	yarn test:unit:ci --projects=site
-
-unit_test_comps:
-	yarn test:unit:ci --projects=src
-
 lint:
 	yarn lint
 

docs/scripts.md

@@ -31,11 +31,9 @@ Scripts should be named using the following naming convention:
 
 * `test:unit:run` -> used by other commands to call jest with correct base arguments. Use to generate snapshots for ci-only tests.
 
-* `test:unit:ci` -> runs all the unit tests with CircleCI optimised config.
-
 * `test:unit:comps` -> runs the unit tests on the src folder.
 
-* `test:unit:site` -> runs the unit tests on the site folder.
+* `test:unit:docs` -> runs the unit tests on the site folder.
 
 * `test:visual:comps:ci:percy` -> starts the local storybook and runs the percy storybook tests afterwards.
 

jest.config.js

@@ -1,16 +1,25 @@
+// These combined settings are now only used by the old-style "yarn test:unit:watch",
+// as the nx-based test commands use a separate coverage folder per project
 module.exports = {
   projects: ['<rootDir>/src/jest.config.js', '<rootDir>/site/jest.config.js'],
   coveragePathIgnorePatterns: ['/node_modules/', '<rootDir>/test'],
   coverageReporters: ['lcov', 'text-summary'],
   collectCoverage: true,
-  coverageDirectory: './coverage',
-  coverageThreshold: {
-    'src/**': {
-      branches: 100,
-      functions: 100,
-      lines: 100,
-      statements: 100,
-    },
-  },
+  coverageDirectory: './coverage/all',
   snapshotSerializers: ['@emotion/jest/serializer'],
+  preset: './jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', {presets: ['@nrwl/react/babel']}],
+  },
+  setupFilesAfterEnv: [
+    '<rootDir>/src/test/test-framework-setup.ts',
+    '@testing-library/jest-dom/extend-expect',
+  ],
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: ['/node_modules/', '/dist/', '/src/theme-checker/'],
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  workerIdleMemoryLimit: 0.4,
 };

jest.preset.js

@@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset').default;
+
+module.exports = {...nxPreset};

nx.json

@@ -0,0 +1,20 @@
+{
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": [
+          "lint:code:comps",
+          "lint:code:docs",
+          "lint:code",
+          "lint:markdown",
+          "lint:next",
+          "test:unit:run",
+          "test:unit:comps",
+          "test:unit:docs"
+        ]
+      }
+    }
+  },
+  "defaultBase": "main"
+}