Merge pull request #720 from Financial-Times/CPP-1466-migrate-to-node-18

CPP1466: Migrate x-dash to Node 18 and add support for Node 18 to x-dash packages

.circleci/config.yml

@@ -3,76 +3,76 @@ version: 2.1
 orbs:
   node: circleci/[email protected]
 
+executors:
+  node:
+    docker:
+      - image: cimg/node:18.16-browsers
+        environment:
+          NODE_OPTIONS: "--openssl-legacy-provider"
+  node16_20:
+    docker:
+      - image: cimg/node:16.20-browsers
+
 references:
   #
   # Workspace
   #
-  container_config_node:
-    &container_config_node
+  container_config_node: &container_config_node
     working_directory: ~/project/build
-    docker:
-      - image: cimg/node:<< parameters.node-version >>-browsers
     parameters:
-      node-version:
-        default: "16.14"
-        type: string
+      executor:
+        default: node
+        type: executor
+    executor: << parameters.executor >>
 
   workspace_root: &workspace_root ~/project
 
-  attach_workspace:
-    &attach_workspace
+  attach_workspace: &attach_workspace
     attach_workspace:
       at: *workspace_root
 
   # Cache keys
   #
-  cache_keys_root:
-    &cache_keys_root
+  cache_keys_root: &cache_keys_root
     keys:
       - cache-root-v6-{{ .Branch }}-{{ checksum "./package.json" }}
 
   # Cache creation
   #
-  create_cache_root:
-    &create_cache_root
+  create_cache_root: &create_cache_root
     save_cache:
       key: cache-root-v6-{{ .Branch }}-{{ checksum "./package.json" }}
       paths:
         - ./node_modules/
 
   # Cache restoration
   #
-  restore_cache_root:
-    &restore_cache_root
+  restore_cache_root: &restore_cache_root
     restore_cache:
       <<: *cache_keys_root
 
   #
   # Filters
   #
 
-  filters_only_renovate_nori:
-    &filters_only_renovate_nori
+  filters_only_renovate_nori: &filters_only_renovate_nori
     branches:
       only: /(^renovate-.*|^nori\/.*)/
 
-  filters_ignore_tags_renovate_nori_build:
-    &filters_ignore_tags_renovate_nori_build
+  filters_ignore_tags_renovate_nori_build: &filters_ignore_tags_renovate_nori_build
     tags:
       ignore: /.*/
     branches:
       ignore: /(^renovate-.*|^nori\/.*|^gh-pages)/
 
-  filters_release_build:
-    &filters_release_build
+  filters_release_build: &filters_release_build
     tags:
       only:
         - /^v\d+\.\d+\.\d+(?:-\w+\.\d+)?$/
     branches:
       ignore: /.*/
 
-  filters_only_main:
-    &filters_only_main
+  filters_only_main: &filters_only_main
     branches:
       only:
         - main
@@ -85,11 +85,9 @@ jobs:
       - run:
           name: Checkout next-ci-shared-helpers
           command: git clone --depth 1
-            [email protected]:Financial-Times/next-ci-shared-helpers.git
-            .circleci/shared-helpers
+            [email protected]:Financial-Times/next-ci-shared-helpers.git --branch
+            unpin-heroku .circleci/shared-helpers
       - *restore_cache_root
-      - node/install-npm:
-          version: '8'
       - run:
           name: Install project dependencies
           command: npm install
@@ -106,8 +104,6 @@ jobs:
     <<: *container_config_node
     steps:
       - *attach_workspace
-      - node/install-npm:
-          version: '8'
       - run:
           name: Run tests
           command: npm test
@@ -119,11 +115,9 @@ jobs:
     <<: *container_config_node
     steps:
       - *attach_workspace
-      - node/install-npm:
-          version: '8'
       - run:
           name: Run end to end test
-          command: npm run e2e
+          command: npm test -w e2e
 
   publish:
     <<: *container_config_node
@@ -155,29 +149,35 @@ workflows:
       - build:
           filters:
             <<: *filters_ignore_tags_renovate_nori_build
-          name: build-v<< matrix.node-version >>
+          name: build-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
       - test:
           requires:
-            - build-v<< matrix.node-version >>
-          name: test-v<< matrix.node-version >>
+            - build-<< matrix.executor >>
+          name: test-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
       - e2e-test:
           requires:
-            - build-v<< matrix.node-version >>
-          name: e2e-test-v<< matrix.node-version >>
+            - build-<< matrix.executor >>
+          name: e2e-test-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
       - deploy:
           filters:
             <<: *filters_only_main
           requires:
-            - test-v16.14
+            - test-node
 
   renovate-nori-build-test:
     jobs:
@@ -188,48 +188,52 @@ workflows:
       - build:
           requires:
             - waiting-for-approval
-          name: build-v<< matrix.node-version >>
+          name: build-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
       - test:
           requires:
-            - build-v<< matrix.node-version >>
-          name: test-v<< matrix.node-version >>
+            - build-<< matrix.executor >>
+          name: test-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
 
   build-test-publish-deploy:
     jobs:
       - build:
           filters:
             <<: *filters_release_build
-          name: build-v<< matrix.node-version >>
+          name: build-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
       - test:
           filters:
             <<: *filters_release_build
           requires:
-            - build-v<< matrix.node-version >>
-          name: test-v<< matrix.node-version >>
+            - build-<< matrix.executor >>
+          name: test-<< matrix.executor >>
           matrix:
             parameters:
-              node-version: [ "16.14" ]
+              executor:
+                - node
+                - node16_20
       - publish:
           context: npm-publish-token
           filters:
             <<: *filters_release_build
           requires:
-            - test-v16.14
+            - test-node
       - deploy:
           filters:
             <<: *filters_release_build
           requires:
             - publish
-
-notify:
-  webhooks:
-    - url: https://ft-next-webhooks.herokuapp.com/circleci2-workflow

.eslintrc.js

@@ -1,32 +1,22 @@
 module.exports = {
 	parser: '@typescript-eslint/parser',
-	env: {
-		node: true,
-		browser: true,
-		es6: true
-	},
 	plugins: ['jsx-a11y'],
 	extends: [
-		'eslint:recommended',
-		// https://github.com/jest-community/eslint-plugin-jest
+		'@financial-times/eslint-config-next',
 		'plugin:jest/recommended',
-		// https://github.com/yannickcr/eslint-plugin-react
 		'plugin:react/recommended',
-		// https://github.com/evcohen/eslint-plugin-jsx-a11y
 		'plugin:jsx-a11y/recommended',
+		'@dotcom-reliability-kit/eslint-config',
 		'prettier'
 	],
 	parserOptions: {
 		ecmaFeatures: {
 			jsx: true
-		},
-		ecmaVersion: 2018,
-		// Support for ESM is not tied to an ES version
-		sourceType: 'module'
+		}
 	},
 	settings: {
 		react: {
-			version: '16.3'
+			version: '16.8'
 		}
 	},
 	rules: {
@@ -53,6 +43,24 @@ module.exports = {
 			rules: {
 				'react/prefer-stateless-function': 'error'
 			}
+		},
+		{
+			files: ['*.js', '*.jsx'],
+			rules: {
+				// We are still using CommonJS imports in our JS files
+				'@typescript-eslint/no-var-requires': 'off'
+			}
+		},
+		{
+			files: [
+				'components/**/__tests__/*.js',
+				'components/**/__tests__/*.jsx',
+				'components/**/storybook/*.jsx'
+			],
+			rules: {
+				// We are still using CommonJS imports in our JS files
+				'@typescript-eslint/no-empty-function': 'off'
+			}
 		}
 	]
 }

app.json

@@ -12,7 +12,6 @@
     }
   },
   "buildpacks": [
-    {"url": "heroku/nodejs"},
-    {"url": "https://github.com/heroku/heroku-buildpack-static.git"}
+    {"url": "heroku/nodejs"}
   ]
 }

components/x-article-save-button/package.json

@@ -27,7 +27,7 @@
     "@financial-times/x-engine": "file:../../packages/x-engine"
   },
   "engines": {
-    "node": "16.x"
+    "node": "16.x || 18.x"
   },
   "peerDependencies": {
     "@financial-times/o-colors": "^6.4.2",

components/x-follow-button/package.json

@@ -8,8 +8,7 @@
   "module": "dist/FollowButton.esm.js",
   "scripts": {
     "build": "node rollup.js",
-    "start": "node rollup.js --watch",
-    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
+    "start": "node rollup.js --watch"
   },
   "keywords": [],
   "author": "",
@@ -39,8 +38,8 @@
     "classnames": "^2.2.6"
   },
   "engines": {
-    "node": "16.x",
-    "npm": "7.x || 8.x"
+    "node": "16.x || 18.x",
+    "npm": "7.x || 8.x || 9.x"
   },
   "volta": {
     "extends": "../../package.json"

components/x-gift-article/package.json

@@ -8,8 +8,7 @@
   "style": "src/main.scss",
   "scripts": {
     "build": "node rollup.js",
-    "start": "node rollup.js --watch",
-    "preinstall": "[ \"$INIT_CWD\" != \"$PWD\" ] || npm_config_yes=true npx check-engine"
+    "start": "node rollup.js --watch"
   },
   "keywords": [
     "x-dash"
@@ -34,8 +33,8 @@
     "sass": "^1.49.0"
   },
   "engines": {
-    "node": "16.x",
-    "npm": "7.x || 8.x"
+    "node": "16.x || 18.x",
+    "npm": "7.x || 8.x || 9.x"
   },
   "volta": {
     "extends": "../../package.json"

components/x-gift-article/src/lib/enterpriseApi.js

@@ -44,7 +44,8 @@ export default class EnterpriseApiClient {
 			// If ES API response code is 404 - User is not B2B and should not see anything about ES
 			throw new Error('UserIsNotB2b')
 		}
-		return await response.json()
+		const responseJSON = await response.json()
+		return responseJSON
 	}
 
 	/**

components/x-gift-article/src/lib/highlightsApi.js

@@ -36,7 +36,8 @@ export default class HighlightsApiClient {
 		)
 
 		const response = await fetch(url, options)
-		return await response.json()
+		const responseJSON = await response.json()
+		return responseJSON
 	}
 
 	async copySharedHighlights(highlightsToken) {