use styled-components@2

and updated all other dependencies

frontend/.babelrc

@@ -11,6 +11,7 @@
     }]
   ],
   "plugins": [
+    "styled-components",
     "react-hot-loader/babel",
     "transform-es2015-modules-commonjs",
     "transform-exponentiation-operator",

frontend/.eslintrc

@@ -86,7 +86,7 @@
     "jsx-a11y/label-has-for": 2,
     "jsx-a11y/lang": 2,
     "jsx-a11y/no-access-key": 2,
-    "jsx-a11y/no-marquee": 2,
+    "jsx-a11y/no-distracting-elements": 2,
     "jsx-a11y/no-onchange": 2,
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/onclick-has-focus": 2,

frontend/package.json

@@ -41,64 +41,65 @@
     "react-intl": "^2.2.3",
     "react-intl-redux": "^0.3.0",
     "react-redux": "^5.0.2",
-    "react-router": "4.0.0-alpha.6",
-    "react-select": "^1.0.0-rc.2",
+    "react-router-dom": "4.0.0-beta.4",
+    "react-select": "^1.0.0-rc.3",
     "reduce-reducers": "^0.1.2",
     "redux": "^3.6.0",
-    "redux-actions": "^1.2.0",
+    "redux-actions": "^1.2.1",
     "redux-batched-actions": "^0.1.5",
-    "redux-form": "^6.4.3",
-    "redux-logger": "^2.7.4",
+    "redux-form": "^6.5.0",
+    "redux-logger": "^2.8.1",
     "redux-promise-middleware": "^4.2.0",
-    "redux-thunk": "^2.1.0",
+    "redux-thunk": "^2.2.0",
     "require-hacker": "^2.1.4",
     "reselect": "^2.5.4",
     "style-loader": "^0.13.1",
-    "styled-components": "^1.3.0",
+    "styled-components": "^2.0.0-1",
     "svg-react-loader": "^0.3.7",
     "understood": "^1.0.1",
     "url-loader": "^0.5.7"
   },
   "devDependencies": {
-    "ava": "^0.17.0",
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.21.0",
+    "ava": "^0.18.1",
+    "babel-cli": "^6.22.2",
+    "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^6.2.10",
+    "babel-plugin-styled-components": "^1.0.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
-    "babel-plugin-transform-async-to-generator": "^6.16.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
-    "babel-plugin-transform-object-rest-spread": "^6.20.2",
-    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-plugin-transform-async-to-generator": "^6.22.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
+    "babel-plugin-transform-object-rest-spread": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-webpack-alias": "^2.1.2",
     "babel-plugin-webpack-loaders": "^0.8.0",
     "babel-preset-env": "^1.1.8",
-    "babel-preset-react": "^6.16.0",
-    "babel-register": "^6.18.0",
-    "enzyme": "^2.7.0",
-    "eslint": "^3.13.1",
+    "babel-preset-react": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.15.0",
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.1",
-    "eslint-plugin-babel": "^4.0.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-babel": "^4.0.1",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-react": "^6.9.0",
     "eslint-plugin-standard": "^2.0.1",
     "fast-async": "^6.2.0",
-    "file-loader": "^0.9.0",
-    "jsdom": "^9.9.1",
+    "file-loader": "^0.10.0",
+    "jsdom": "^9.10.0",
     "json-loader": "^0.5.4",
     "ncp": "^2.0.0",
     "node-hook": "^0.4.0",
-    "nyc": "^10.0.0",
+    "nyc": "^10.1.2",
     "pre-commit": "^1.2.2",
     "react-addons-test-utils": "^15.4.2",
     "redux-ava": "^2.2.0",
     "simple-mock": "^0.7.3",
-    "tap-xunit": "^1.5.1",
+    "tap-xunit": "^1.7.0",
     "thenify": "^3.2.1",
-    "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^1.16.2",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.3.0",
     "webpack-shell-plugin": "^0.5.0"
   },
   "ava": {

frontend/src/components/breadcrumb/index.js

@@ -4,7 +4,7 @@ const Column = require('@ui/components/column');
 const BaseElements = require('@ui/components/base-elements');
 const PropTypes = require('@root/prop-types');
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 const Styled = require('styled-components');
 const flatten = require('lodash.flatten');
 const fns = require('@ui/shared/functions');

frontend/src/components/header/index.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 const Styled = require('styled-components');
 
 const Column = require('@ui/components/column');

frontend/src/components/navigation/org.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 const ReactRedux = require('react-redux');
 const Styled = require('styled-components');
 

frontend/src/components/redirect/index.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const {
   Redirect

frontend/src/components/section/index.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 const Styled = require('styled-components');
 
 const Li = require('@ui/components/horizontal-list/li');

frontend/src/components/service-item/index.js

@@ -1,6 +1,6 @@
 const forceArray = require('force-array');
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const Anchor = require('@ui/components/anchor');
 const List = require('@ui/components/list');

frontend/src/containers/app.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 const Styled = require('styled-components');
 
 const actions = require('@state/actions');

frontend/src/containers/home/index.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const Container = require('@ui/components/container');
 const Org = require('@containers/org');

frontend/src/containers/new-project/index.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const NewProject = require('@containers/new-project/new-project');
 const Billing = require('@containers/new-project/billing');

frontend/src/containers/org/index.js

@@ -1,7 +1,7 @@
 const isEmpty = require('lodash.isempty');
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const NotFound = require('@containers/not-found');
 const PropTypes = require('@root/prop-types');

frontend/src/containers/org/projects.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const Section = require('./section');
 const Projects = require('@containers/projects');

frontend/src/containers/org/settings.js

@@ -1,7 +1,7 @@
 const React = require('react');
 // const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
-// const ReactRouter = require('react-router');
+// const ReactRouter = require('react-router-dom');
 
 const Section = require('./section');
 

frontend/src/containers/project/index.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const PropTypes = require('@root/prop-types');
 const Redirect = require('@components/redirect');

frontend/src/containers/project/services.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const Section = require('./section');
 const Services = require('@containers/services');

frontend/src/containers/projects/index.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const Button = require('@ui/components/button');
 const Column = require('@ui/components/column');
@@ -28,7 +28,6 @@ const {
 } = ReactRouter;
 
 const Projects = (props) => {
-
   const {
     org = {},
     projects = [],

frontend/src/containers/service/index.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const PropTypes = require('@root/prop-types');
 const Redirect = require('@components/redirect');

frontend/src/root.js

@@ -2,7 +2,7 @@ const React = require('react');
 const ReactIntlRedux = require('react-intl-redux');
 const ReactHotLoader = require('react-hot-loader');
 const ReactRedux = require('react-redux');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 
 const App = require('@containers/app');
 const Store = require('@state/store');

frontend/test/helpers/create.js

@@ -1,7 +1,7 @@
 const React = require('react');
 const ReactRedux = require('react-redux');
 const ReactIntl = require('react-intl');
-const ReactRouter = require('react-router');
+const ReactRouter = require('react-router-dom');
 const createStore = require('@state/store');
 
 const {

ui/.babelrc

@@ -5,6 +5,7 @@
     "es2015"
   ],
   "plugins": [
+    "styled-components",
     "transform-exponentiation-operator",
     "syntax-async-functions",
     ["transform-object-rest-spread", {

ui/.eslintrc

@@ -86,7 +86,7 @@
     "jsx-a11y/label-has-for": 2,
     "jsx-a11y/lang": 2,
     "jsx-a11y/no-access-key": 2,
-    "jsx-a11y/no-marquee": 2,
+    "jsx-a11y/no-distracting-elements": 2,
     "jsx-a11y/no-onchange": 2,
     "jsx-a11y/no-static-element-interactions": 1,
     "jsx-a11y/onclick-has-focus": 2,

ui/package.json

@@ -19,7 +19,7 @@
     "chart.js": "^2.4.0",
     "chartjs-chart-box-plot": "prerelease",
     "color": "^1.0.3",
-    "d3": "^4.4.1",
+    "d3": "^4.5.0",
     "lodash.find": "^4.6.0",
     "lodash.first": "^3.0.0",
     "lodash.flatten": "^4.4.0",
@@ -32,43 +32,45 @@
     "random-natural": "^1.0.3",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-select": "^1.0.0-rc.2",
+    "react-select": "^1.0.0-rc.3",
     "reduce-css-calc": "^1.3.0",
-    "styled-components": "^1.3.0",
+    "styled-components": "^2.0.0-1",
     "svg-react-loader": "^0.3.7",
-    "transform-props-with": "^2.1.0"
+    "transform-props-with": "^2.1.0",
+    "traverse": "^0.6.6"
   },
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",
-    "ava": "^0.17.0",
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.21.0",
+    "ava": "^0.18.1",
+    "babel-cli": "^6.22.2",
+    "babel-core": "^6.22.1",
     "babel-eslint": "^7.1.1",
+    "babel-plugin-styled-components": "^1.0.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
-    "babel-plugin-transform-object-rest-spread": "^6.20.2",
-    "babel-preset-react": "^6.16.0",
-    "babel-register": "^6.18.0",
+    "babel-plugin-transform-object-rest-spread": "^6.22.0",
+    "babel-preset-react": "^6.22.0",
+    "babel-register": "^6.22.0",
     "dangerously-set-inner-html": "2.0.0",
-    "enzyme": "^2.7.0",
-    "eslint": "^3.13.1",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.15.0",
     "eslint-config-semistandard": "^7.0.0",
     "eslint-config-standard": "^6.2.1",
-    "eslint-plugin-babel": "^4.0.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-babel": "^4.0.1",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-react": "^6.9.0",
     "eslint-plugin-standard": "^2.0.1",
-    "jsdom": "^9.9.1",
+    "jsdom": "^9.10.0",
     "memory-fs": "^0.4.1",
     "node-hook": "^0.4.0",
-    "nyc": "^10.0.0",
+    "nyc": "^10.1.2",
     "pre-commit": "^1.2.2",
     "react-addons-test-utils": "^15.4.2",
     "st": "^1.2.0",
-    "stylelint": "^7.7.1",
-    "stylelint-config-standard": "^15.0.1",
+    "stylelint": "^7.8.0",
+    "stylelint-config-standard": "^16.0.0",
     "stylelint-processor-styled-components": "^0.0.4",
-    "tap-xunit": "^1.5.1"
+    "tap-xunit": "^1.7.0"
   },
   "ava": {
     "failFast": true,

ui/src/shared/constants/breakpoints.js

@@ -1,5 +1,9 @@
 const styled = require('styled-components');
 
+const {
+  css
+} = styled;
+
 // github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
 const small = {
   upper: '48rem'
@@ -26,17 +30,17 @@ const screens = {
   'smallOnly': `${screen} and (max-width: ${small.upper})`,
   'small': `${screen} and (min-width: ${small.upper}})`,
   // >= 1024px
-  'mediumOnly': `${screen} and (min-width: ${medium.lower}) 
+  'mediumOnly': `${screen} and (min-width: ${medium.lower})
                   and (max-width: ${medium.upper})`,
   'mediumDown': `${screen} and (max-width: ${medium.upper})`,
   'medium': `${screen} and (min-width: ${medium.lower})`,
   // >= 1200px
-  'largeOnly': `${screen} and (min-width: ${large.lower}) 
+  'largeOnly': `${screen} and (min-width: ${large.lower})
                  and (max-width: ${large.upper})`,
   'largeDown': `${screen} and (max-width: ${large.upper})`,
   'large': `${screen} and (min-width: 75rem)`,
 
-  'xlarge': `${screen} and (min-width: ${xlarge.lower}) 
+  'xlarge': `${screen} and (min-width: ${xlarge.lower})
              and (max-width: ${xlarge.upper})`,
   'xlargeUp': `${screen} and (min-width: ${xlarge.lower})`,
 };
@@ -44,9 +48,9 @@ const screens = {
 const breakpoints = Object.keys(screens).reduce((acc, label) => {
   return {
     ...acc,
-    [label]: (...args) => styled.css`
+    [label]: (...args) => css`
       @media ${screens[label]} {
-        ${styled.css(...args)}
+        ${css(...args)}
       }
     `
   };