PXP-7942 Feat/newer react

.babelrc

@@ -3,7 +3,9 @@
     [
       "@babel/preset-env",
       {
-        "targets": "> 2%, not dead"
+        "targets": "> 2%, not dead",
+        "useBuiltIns": "usage",
+        "corejs": 3
       }
     ],
     "@babel/preset-react",
@@ -12,9 +14,26 @@
   "plugins": [
     "dev-expression",
     "transform-class-properties",
-    ["relay",
-      {"compat": true, "schema": "data/schema.json"}],
-    "@babel/plugin-transform-runtime",
-    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]
+    [
+      "relay",
+      {
+        "compat": true,
+        "schema": "data/schema.json"
+      }
+    ],
+    [
+      "@babel/transform-runtime",
+      {
+        "corejs": 3
+      }
+    ],
+    [
+      "@babel/plugin-proposal-object-rest-spread",
+      {
+        "loose": true,
+        "useBuiltIns": true
+      }
+    ],
+    ["@babel/plugin-transform-modules-commonjs"]
   ]
 }

.eslintrc.js

@@ -1,12 +1,26 @@
 module.exports = {
   // "extends": "eslint:recommended",
   extends: 'airbnb',
+  settings: {
+    react: {
+      pragma: 'React',
+      version: '16.14',
+    },
+    'import/resolver': {
+      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
+    },
+  },
   root: true,
   env: {
     browser: true,
     es6: true,
     jest: true,
   },
+  plugins: [
+    'react',
+    'jsx-a11y',
+    'import',
+  ],
   parser: 'babel-eslint',
   parserOptions: {
     sourceType: 'module',
@@ -38,22 +52,46 @@ module.exports = {
       'error',
       'always',
     ],
-    // fixed in newer version of jsx-a11y remove if we upgrade
-    'jsx-a11y/label-has-for': ['error', {
-      required: {
-        some: ['nesting', 'id'],
+    'max-classes-per-file': ['error', 2],
+    'max-len': [
+      'error',
+      {
+        code: 150,
+        ignoreComments: true,
+        ignoreTrailingComments: true,
+        ignoreUrls: true,
+        ignoreStrings: true,
+        ignoreTemplateLiterals: true,
       },
+    ],
+    'prefer-destructuring': [
+      'error',
+      { object: true, array: false },
+    ],
+    'react/jsx-fragments': [
+      'error',
+      'element',
+    ],
+    'jsx-a11y/label-has-associated-control': [2, {
+      labelAttributes: ['label'],
+      controlComponents: ['Switch'],
+      depth: 3,
     }],
+    'jsx-a11y/anchor-is-valid': ['off'],
     // see https://github.com/clayne11/eslint-import-resolver-meteor/issues/17
     // - seems to affect Codacy :-(
     'import/extensions': ['off', 'never'],
+    'import/no-cycle': 'off',
+    'prefer-promise-reject-errors': 'off',
     'react/jsx-indent': 'off',
     'react/forbid-prop-types': 'off',
     'react/prefer-stateless-function': 'off',
     'react/jsx-curly-brace-presence': ['off'],
     'function-paren-newline': ['off'],
     'react/no-array-index-key': ['off'],
     'react/destructuring-assignment': ['off'],
+    'react/jsx-one-expression-per-line': ['off'],
+    'react/jsx-props-no-spreading': ['off'],
   },
   overrides: [
     {
@@ -164,9 +202,4 @@ module.exports = {
       },
     },
   ],
-  settings: {
-    'import/resolver': {
-      typescript: {}, // this loads <rootdir>/tsconfig.json to eslint
-    },
-  },
 };

.secrets.baseline

@@ -3,7 +3,7 @@
     "files": "package-lock.json|.*/dictionary.json|.*/schema.json",
     "lines": ".*integrity.*"
   },
-  "generated_at": "2020-07-20T19:23:44Z",
+  "generated_at": "2021-03-31T21:06:30Z",
   "plugins_used": [
     {
       "name": "AWSKeyDetector"
@@ -72,7 +72,7 @@
         "hashed_secret": "fb64f7d5722e6a8c86893f3f3085226fc659b94c",
         "is_secret": false,
         "is_verified": false,
-        "line_number": 101,
+        "line_number": 105,
         "type": "Base64 High Entropy String"
       }
     ],

.storybook/webpack.config.js

@@ -3,7 +3,7 @@ const basename = process.env.BASENAME || '/';
 const webpack = require('webpack');
 
 module.exports = {
-  entry: ['babel-polyfill', '../src/index.jsx'],
+  entry: '../src/index.jsx',
   output: {
     path: __dirname,
     filename: 'bundle.js',

data/dictionaryHelper.js

@@ -4,10 +4,9 @@
  * @return {experimentType, fileTypeList} gqlSetup object used by data/gqlSetup.js
  */
 function dictToGQLSetup(dict) {
-  const fileTypeList = Object.keys(dict).filter(key =>
-    typeof dict[key] === 'object' &&
-    dict[key].category &&
-    dict[key].category.endsWith('_file'),
+  const fileTypeList = Object.keys(dict).filter((key) => typeof dict[key] === 'object'
+    && dict[key].category
+    && dict[key].category.endsWith('_file'),
   );
   // admin types that link to the 'project' level and are not project or program
   const adminTypeList = Object.keys(dict).filter(
@@ -22,13 +21,13 @@ function dictToGQLSetup(dict) {
       return {
         typeName: key,
         entry,
-        projectLink: entry.links.find(link => link.target_type === 'project' && link.required),
+        projectLink: entry.links.find((link) => link.target_type === 'project' && link.required),
       };
     },
   );
 
   const experimentType = ['experiment', 'study', 'trio'].find(
-    name => Object.prototype.hasOwnProperty.call(dict, name),
+    (name) => Object.prototype.hasOwnProperty.call(dict, name),
   );
 
   return {
@@ -48,9 +47,9 @@ function paramByApp(params, key) {
 }
 
 function getGraphQL(graphQLParams) {
-  const boardCounts = graphQLParams.boardCounts;
-  const chartCounts = graphQLParams.chartCounts;
-  let projectDetails = graphQLParams.projectDetails;
+  const { boardCounts } = graphQLParams;
+  const { chartCounts } = graphQLParams;
+  let { projectDetails } = graphQLParams;
   if (typeof projectDetails === 'string') {
     projectDetails = graphQLParams[projectDetails];
   }
@@ -66,9 +65,9 @@ const { params } = require('./parameters');
 function paramSetup() {
   const countsAndDetails = getGraphQL(paramByApp(params, 'graphql'));
   return {
-    boardCounts: countsAndDetails.boardCounts.map(item => item.graphql),
-    chartCounts: countsAndDetails.chartCounts.map(item => item.graphql),
-    projectDetails: countsAndDetails.projectDetails.map(item => item.graphql),
+    boardCounts: countsAndDetails.boardCounts.map((item) => item.graphql),
+    chartCounts: countsAndDetails.chartCounts.map((item) => item.graphql),
+    projectDetails: countsAndDetails.projectDetails.map((item) => item.graphql),
   };
 }
 

data/getSchema.js

@@ -38,7 +38,7 @@ const { gdcSubPath } = (function () {
 
     Use: node getSchema.js [gdcSubmissionApiPath]
         - where gdcSubmissionApiPath defaults to: process.env.GDC_SUBPATH || 'http://localhost:5000/v0/submission/'
-        - example - if gdcSubmissionApiPath = https://dev.bionimbus.org/api/vo/submission/, 
+        - example - if gdcSubmissionApiPath = https://dev.bionimbus.org/api/vo/submission/,
             then the script loads:
             * https://dev.bionimbus.org/api/v0/submission/_dictionary/_all
             * https://dev.bionimbus.org/api/v0/submission/getschema
@@ -103,12 +103,12 @@ async function fetchJsonRetry(urlStr, opts) {
       (res) => {
         if (res.status === 200) {
           return res.json().catch(
-            err => doRetry(`failed json parse - ${err}`),
+            (err) => doRetry(`failed json parse - ${err}`),
           );
         }
         return doRetry(`non-200 from server: ${res.status}`);
       },
-      err => doRetry(err),
+      (err) => doRetry(err),
     );
   };
 

data/getTexts.js

@@ -5,15 +5,15 @@ const componentTexts = paramByApp(params, 'components');
 
 function getChartText() {
   const graphQL = getGraphQL(paramByApp(params, 'graphql'));
-  const boardPluralNames = graphQL.boardCounts.map(item => item.plural);
+  const boardPluralNames = graphQL.boardCounts.map((item) => item.plural);
   if (boardPluralNames.length < 4) { boardPluralNames.push('Files'); }
-  const detailPluralNames = graphQL.projectDetails.map(item => item.plural);
+  const detailPluralNames = graphQL.projectDetails.map((item) => item.plural);
   if (detailPluralNames.length < 4) { detailPluralNames.push('Files'); }
-  const indexChartNames = graphQL.boardCounts.map(item => item.plural);
+  const indexChartNames = graphQL.boardCounts.map((item) => item.plural);
   if (indexChartNames.length < 4) { indexChartNames.push('Files'); }
   return {
     boardPluralNames,
-    chartNames: graphQL.chartCounts.map(item => item.name),
+    chartNames: graphQL.chartCounts.map((item) => item.name),
     indexChartNames,
     detailPluralNames,
   };
@@ -64,7 +64,7 @@ function doStringify(value, variables, indent = 0, spaces = 0) {
   const ending = (spaces === 0) ? '' : '\n';
   if (Array.isArray(value)) {
     const objs = value.map(
-      item => `${insertSpace(indent + spaces)}${doStringify(item, variables, indent + spaces, spaces)}`,
+      (item) => `${insertSpace(indent + spaces)}${doStringify(item, variables, indent + spaces, spaces)}`,
     ).join(`,${ending}`);
     return doWrapping(objs, '[', ']', indent, spaces);
   }
@@ -82,7 +82,7 @@ function doStringify(value, variables, indent = 0, spaces = 0) {
   // but without quotes around the keys.
   const props = Object
     .keys(value)
-    .map(key => `${insertSpace(indent + spaces)}${key}:${doStringify(value[key], variables, indent + spaces, spaces)}`)
+    .map((key) => `${insertSpace(indent + spaces)}${key}:${doStringify(value[key], variables, indent + spaces, spaces)}`)
     .join(`,${ending}`);
   return doWrapping(props, '{', '}', indent, spaces);
 }
@@ -124,5 +124,5 @@ console.log(`const gaTracking = '${defaultGA}';`);
 console.log('const hostname = typeof window !== \'undefined\' ? `${window.location.protocol}//${window.location.hostname}/` : \'http://localhost/\';');
 console.log(`const components = ${stringify(fillDefaultValues(componentTexts, defaultTexts), ['hostname'], 2)};`);
 console.log(`const config = ${JSON.stringify(config, null, '  ')};`);
-console.log(`const requiredCerts = [${defaultRequiredCerts.map(item => `'${item}'`)}];`);
+console.log(`const requiredCerts = [${defaultRequiredCerts.map((item) => `'${item}'`)}];`);
 console.log('module.exports = { components, config, gaTracking, requiredCerts };');

data/gqlSetup.js

@@ -12,7 +12,6 @@ const dataFolder = __dirname;
 const dictPath = `${dataFolder}/dictionary.json`;
 const templateName = 'gqlHelper.js.njk';
 
-
 if (!fs.existsSync(`${dataFolder}/${templateName}`)) {
   console.error(`ERR: ${dataFolder}/${templateName} does not exist - bailing out`);
   process.exit(1);

data/parameters.js

@@ -1,14 +1,13 @@
 const fs = require('fs');
 
-
 /**
  * Little helper script just accumulates the .json
  * files in a given directory into an object keyed
  * on the file basename with .json stripped.
  */
 function scanJsonDir(dirPath) {
   return fs.readdirSync(dirPath)
-    .filter(name => name.endsWith('.json'))
+    .filter((name) => name.endsWith('.json'))
     .map(
       (jsonName) => {
         const key = jsonName.substring(0, jsonName.length - 5); // strip .json