build: upgrade babel and webpack (#360)

* build: upgrade babel and webpack

* docs: upgrade Gatsby to v2 beta

* WIP

* docs: upgrade to gatsby 2

* Update package.json

Author: jquense

.babelrc

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [['babel-preset-jason', { runtime: false }]],
+  plugins: [
+    ['babel-plugin-transform-react-remove-prop-types', { mode: 'wrap' }],
+  ],
+  env: {
+    esm: {
+      presets: [['babel-preset-jason', { modules: false }]],
+    },
+  },
+}

.babelrc.js

@@ -7,9 +7,9 @@
     "test": "npm run lint && npm run testonly",
     "testonly": "jest --verbose",
     "tdd": "jest --watch",
-    "build": "rimraf lib && babel src --out-dir lib && npm run build:dist && cp README.md LICENSE ./lib",
+    "build": "babel src --out-dir lib --delete-dir-on-start && npm run build:dist && cp README.md LICENSE ./lib",
     "build:docs": "npm -C www run build",
-    "build:dist": "rimraf lib/dist && webpack && NODE_ENV=production webpack -p",
+    "build:dist": "webpack --mode production",
     "bootstrap": "yarn && yarn --cwd www",
     "lint": "eslint src test",
     "release": "release",
@@ -60,40 +60,31 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^7.0.0",
-    "@commitlint/config-angular": "^7.0.1",
-    "@commitlint/prompt": "^7.0.0",
-    "@commitlint/prompt-cli": "^7.0.0",
-    "@commitlint/travis-cli": "^7.0.0",
+    "@babel/cli": "^7.0.0-beta.51",
+    "@babel/core": "^7.0.0-beta.51",
     "@semantic-release/changelog": "^2.0.1",
-    "@semantic-release/git": "^4.0.1",
+    "@semantic-release/git": "^6.0.1",
     "@semantic-release/github": "^4.2.11",
-    "@semantic-release/npm": "^3.2.4",
+    "@semantic-release/npm": "^3.3.3",
     "@storybook/addon-actions": "^3.2.11",
     "@storybook/react": "^3.2.11",
-    "babel-cli": "^6.24.0",
-    "babel-core": "^6.24.0",
-    "babel-eslint": "^7.1.1",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^6.4.1",
-    "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-transform-object-assign": "^6.22.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^8.2.5",
+    "babel-jest": "^23.2.0",
+    "babel-loader": "^8.0.0-beta.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.5",
-    "babel-preset-latest": "^6.24.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-2": "^6.18.0",
+    "babel-preset-jason": "^4.2.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
-    "eslint": "^3.17.1",
+    "eslint": "^4.19.1",
     "eslint-config-jason": "^4.0.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-react": "^6.10.3",
+    "eslint-plugin-react": "^7.10.0",
     "husky": "^1.0.0-rc.8",
-    "jest": "^20.0.4",
+    "jest": "^23.2.0",
     "prettier": "^1.11.1",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
@@ -102,10 +93,11 @@
     "rimraf": "^2.6.1",
     "semantic-release": "^15.1.7",
     "semantic-release-alt-publish-dir": "^2.1.1",
-    "sinon": "^2.1.0",
+    "sinon": "^6.0.1",
     "travis-deploy-once": "^4.4.1",
-    "webpack": "^3.6.0",
-    "webpack-atoms": "^3.0.2"
+    "webpack": "^4.12.2",
+    "webpack-atoms": "^7.0.1",
+    "webpack-cli": "^3.0.8"
   },
   "release": {
     "pkgRoot": "lib",

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = require('../.babelrc');

husky.config.js

@@ -1,6 +1,4 @@
 
-globals:
-  graphql: false
 extends:
   - prettier
   - prettier/react

package.json

@@ -1,8 +1,8 @@
 const path = require('path');
 const config = require('./gatsby-config');
 
-exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators;
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions;
   const componentTemplate = path.join(
     __dirname,
     'src',

www/.babelrc.js

@@ -13,17 +13,17 @@
   "license": "MIT",
   "dependencies": {
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.0.0",
-    "gatsby-link": "^1.0.0",
-    "gatsby-plugin-sass": "^1.0.0",
+    "gatsby": "^2.0.0-beta.12",
+    "gatsby-plugin-sass": "^2.0.0-beta.3",
     "gatsby-remark-prismjs": "^1.0.0",
-    "gatsby-source-filesystem": "^1.0.0",
-    "gatsby-transformer-react-docgen": "^1.0.0",
+    "gatsby-source-filesystem": "^2.0.1-beta.3",
+    "gatsby-transformer-react-docgen": "^2.1.1-beta.3",
     "gatsby-transformer-remark": "^1.0.0",
     "lodash": "^4.17.4",
     "react-bootstrap": "^0.32.1"
   },
   "devDependencies": {
-    "gh-pages": "^1.0.0"
+    "gh-pages": "^1.0.0",
+    "node-sass": "^4.9.0"
   }
 }

www/.eslintrc.yml

@@ -1,6 +1,7 @@
+import { graphql, Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Link from 'gatsby-link';
+
 import { Grid, Navbar, Nav } from 'react-bootstrap';
 
 import '../css/bootstrap.scss';
@@ -35,7 +36,7 @@ NavItem.propTypes = {
   to: PropTypes.string.isRequired,
 };
 
-class BaseLayout extends React.Component {
+class Layout extends React.Component {
   render() {
     const { data, location, children } = this.props;
     return (
@@ -64,32 +65,24 @@ class BaseLayout extends React.Component {
           </Navbar.Collapse>
         </Navbar>
         <Grid style={{ paddingTop: '4rem', paddingBottom: '1rem' }}>
-          {children()}
+          {children}
         </Grid>
       </div>
     );
   }
 }
 
-BaseLayout.propTypes = propTypes;
+Layout.propTypes = propTypes;
 
-export default BaseLayout;
+export default Layout;
 
 export const exposedComponentsFragment = graphql`
-  fragment ComponentPages on RootQueryType {
-    site {
-      siteMetadata {
-        componentPages {
-          path
-          displayName
-        }
+  fragment Layout_site on Site {
+    siteMetadata {
+      componentPages {
+        path
+        displayName
       }
     }
   }
 `;
-
-export const query = graphql`
-  query BaseLayout {
-    ...ComponentPages
-  }
-`;