feat: update to CRA 2 and Storybook 5

.circleci/config.yml

@@ -9,8 +9,6 @@ jobs:
       - checkout
       - run:
           command: npm ci
-      - run:
-          command: npm run lint
       - run:
           command: npm run test
       - run:

eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'react-app'
+}

package.json

@@ -6,13 +6,11 @@
     "start": "run-script-os",
     "start:win32": "@powershell -Command $env:REACT_APP_GIT_REV=(git rev-parse --short HEAD); react-scripts start",
     "start:darwin:linux": "cross-env REACT_APP_GIT_REV=`git rev-parse --short HEAD` react-scripts start",
-    "prebuild": "shx cp config/webpack.config.prod.js node_modules/react-scripts/config/",
     "build": "run-script-os",
     "build:win32": "@powershell -Command $env:REACT_APP_GIT_REV=(git rev-parse --short HEAD); react-scripts build",
     "build:darwin:linux": "cross-env REACT_APP_GIT_REV=`git rev-parse --short HEAD` react-scripts build",
     "build:icons": "svgr -d src/icons node_modules/ipfs-css/icons && standard --fix src/icons/*",
-    "lint": "standard",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=node",
     "test:coverage": "react-scripts test --coverage",
     "test:serve": "ecstatic build --cache=0 --port=3001",
     "test:e2e": "react-scripts test --testMatch **/test/e2e/**/*.test.js",
@@ -67,37 +65,34 @@
     "react-loadable": "^5.5.0",
     "react-overlays": "^0.8.3",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "1.1.5",
+    "react-scripts": "^2.1.8",
     "react-test-renderer": "^16.4.2",
     "react-virtualized": "^9.20.1",
     "redux-bundler": "^21.2.2",
     "redux-bundler-react": "^1.0.1",
     "tachyons": "^4.11.1",
     "topojson": "^3.0.2",
-    "uglifyjs-webpack-plugin": "^1.3.0",
     "video-extensions": "^1.1.0",
     "window-or-global": "^1.0.1",
     "window.ipfs-fallback": "^1.1.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^3.4.10",
-    "@storybook/addon-actions": "^3.4.10",
-    "@storybook/addon-knobs": "^3.4.10",
-    "@storybook/addon-links": "^3.4.10",
-    "@storybook/addons": "^3.4.10",
-    "@storybook/react": "^3.4.10",
+    "@storybook/addon-a11y": "^5.0.1",
+    "@storybook/addon-actions": "^5.0.1",
+    "@storybook/addon-knobs": "^5.0.1",
+    "@storybook/addon-links": "^5.0.1",
+    "@storybook/addons": "^5.0.1",
+    "@storybook/react": "^5.0.1",
     "@svgr/cli": "^2.3.0",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.6",
-    "babel-runtime": "^6.26.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^9.0.0",
     "big.js": "^5.1.2",
     "bundlesize": "^0.17.0",
     "cids": "^0.5.5",
     "cross-env": "^5.2.0",
     "ecstatic": "^3.3.0",
     "enzyme": "^3.6.0",
     "enzyme-adapter-react-16": "^1.4.0",
-    "eslint": "^4.19.1",
     "fake-indexeddb": "^2.0.4",
     "ipld-bitcoin": "^0.1.9",
     "ipld-dag-cbor": "^0.13.1",
@@ -108,16 +103,16 @@
     "ipld-zcash": "^0.1.6",
     "multihashing-async": "^0.5.1",
     "npm-run-all": "^4.1.5",
+    "prettier": "^1.16.4",
     "puppeteer": "^1.7.0",
     "run-script-os": "^1.0.3",
     "shx": "^0.3.2",
-    "standard": "^12.0.1",
     "webpack-bundle-analyzer": "^3.0.3"
   },
-  "homepage": "./",
-  "standard": {
-    "parser": "babel-eslint"
+  "eslintConfig": {
+    "extends": "react-app"
   },
+  "homepage": "./",
   "bundlesize": [
     {
       "path": "./build/static/js/*.js",
@@ -127,5 +122,11 @@
       "path": "./build/static/css/*.css",
       "maxSize": "18 kB"
     }
+  ],
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
   ]
 }

prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: true,
+}

src/bundles/index.js

@@ -43,13 +43,7 @@ export default composeBundles(
   statsBundle,
   filesBundle(),
   exploreBundle(async () => {
-    const [
-      // IPLD
-      ipld,
-      // IPLD Formats
-      ipldBitcoin, ipldDagCbor, ipldDagPb, ipldGit, ipldRaw, ipldZcash,
-      { ethAccountSnapshot, ethBlock, ethBlockList, ethStateTrie, ethStorageTrie, ethTxTrie, ethTx }
-    ] = await Promise.all([
+    const ipldDeps = await Promise.all([
       import(/* webpackChunkName: "ipld" */ 'ipld'),
       import(/* webpackChunkName: "ipld" */ 'ipld-bitcoin'),
       import(/* webpackChunkName: "ipld" */ 'ipld-dag-cbor'),
@@ -60,12 +54,14 @@ export default composeBundles(
       import(/* webpackChunkName: "ipld" */ 'ipld-ethereum')
     ])
 
+    // CommonJs exports object is .default when imported ESM style
+    const [ipld, ...formats] = ipldDeps.map(mod => mod.default)
+    // ipldEthereum is an Object, each key points to a ipld format impl
+    const ipldEthereum = formats.pop()
+    formats.push(...Object.values(ipldEthereum))
     return {
-      ipld: ipld,
-      formats: [
-        ipldBitcoin, ipldDagCbor, ipldDagPb, ipldGit, ipldRaw, ipldZcash,
-        ethAccountSnapshot, ethBlock, ethBlockList, ethStateTrie, ethStorageTrie, ethTxTrie, ethTx
-      ]
+      ipld,
+      formats
     }
   }),
   configBundle,

src/components/provider-link/ProviderLink.js

@@ -26,7 +26,7 @@ const ProviderLink = ({ name }) => {
     return <span>{info.name || name}</span>
   }
   return (
-    <a href={info.url} className='link blue' target='_blank'>{info.name || name}</a>
+    <a href={info.url} className='link blue' target='_blank' rel='noopener noreferrer'>{info.name || name}</a>
   )
 }
 

src/components/version-link/VersionLink.js

@@ -32,7 +32,7 @@ const VersionLink = ({ agentVersion }) => {
   }
   return (
     <span>
-      <a href={url} className='link blue' target='_blank'>
+      <a href={url} className='link blue' target='_blank' rel='noopener noreferrer'>
         {name}
       </a>
       <ReleaseLink agent={name} version={version} />
@@ -45,7 +45,7 @@ const ReleaseLink = ({ agent, version }) => {
   if (agent === 'js-ipfs') {
     const releaseUrl = `${providers['js-ipfs'].url}/releases/tag/v${version}`
     return (
-      <a href={releaseUrl} className='link blue ml2' target='_blank'>
+      <a href={releaseUrl} className='link blue ml2' target='_blank' rel='noopener noreferrer'>
         v{version}
       </a>
     )

src/files/breadcrumbs/Breadcrumbs.js

@@ -33,6 +33,7 @@ function Breadcrumbs ({ t, tReady, path, onClick, className = '', ...props }) {
 
   const res = bread.map((link, index) => ([
     <div key={`${index}link`} className='dib bb bw1 pv1' style={{ borderColor: '#244e66' }}>
+      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
       <a className='pointer dib link dark-gray o-50 glow' onClick={() => onClick(link.path)}>
         {link.name}
       </a>

src/files/file-preview/FilePreview.js

@@ -42,7 +42,7 @@ class FilesPreview extends React.Component {
         return (
           <object width='100%' height='500px' data={src} type='application/pdf'>
             {t('noPDFSupport')}
-            <a href={src} download target='_blank' className='underline-hover navy-muted'>{t('downloadPDF')}</a>
+            <a href={src} download target='_blank' rel='noopener noreferrer' className='underline-hover navy-muted'>{t('downloadPDF')}</a>
           </object>
         )
       case 'video':
@@ -59,7 +59,7 @@ class FilesPreview extends React.Component {
             <p className='b'>{t('cantBePreviewed')} <span role='img' aria-label='sad'>😢</span></p>
             <p>
               <Trans i18nKey='downloadInstead'>
-                Try <a href={src} download target='_blank' className='link blue' >downloading</a> it instead.
+                Try <a href={src} download target='_blank' rel='noopener noreferrer' className='link blue' >downloading</a> it instead.
               </Trans>
             </p>
           </div>

src/navigation/NavBar.js

@@ -37,6 +37,7 @@ const NavLink = ({
   }, ['fill-current-color'])
 
   return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
     <a href={disabled ? null : href} className={anchorClass} role='menuitem' title={children}>
       <span className={`dib ${open ? 'dt-l' : ''}`}>
         <span className={`dib dtc-l v-mid ${open ? 'pl3 pl5-l' : 'ph3'}`} style={{ width: 50 }}>
@@ -73,12 +74,12 @@ export const NavBar = ({ t, isSettingsEnabled, width, open, onToggle }) => {
       { open &&
         <div className='dn db-l navbar-footer mb3 center'>
           { gitRevision && <div className='tc mb1'>
-            <a className='link white f7 o-80 glow' href={revisionUrl} target='_blank'>{t('status:revision')} {gitRevision}</a>
+            <a className='link white f7 o-80 glow' href={revisionUrl} target='_blank' rel='noopener noreferrer'>{t('status:revision')} {gitRevision}</a>
           </div> }
           <div className='flex flex-colum'>
-            <a className='link white f7 o-50 glow' href={codeUrl} target='_blank'>{t('status:codeLink')}</a>
+            <a className='link white f7 o-50 glow' href={codeUrl} target='_blank' rel='noopener noreferrer'>{t('status:codeLink')}</a>
             <span className='mh2 white f7 o-50'>|</span>
-            <a className='link white f7 o-50 glow' href={bugsUrl} target='_blank'>{t('status:bugsLink')}</a>
+            <a className='link white f7 o-50 glow' href={bugsUrl} target='_blank' rel='noopener noreferrer'>{t('status:bugsLink')}</a>
           </div>
         </div> }
     </div>