upgrade frontend to styled-components

2016-12-12 10:56:48 +00:00 · 2016-12-12 10:56:48 +00:00 · 43af2d0785
commit 43af2d0785
parent c3db3494f3
13 changed files with 371 additions and 1108 deletions
--- a/.gitignore
+++ b/.gitignore
@ -151,4 +151,5 @@ $RECYCLE.BIN/

 /cloudapi-graphql/credentials.json
 tap-xunit
-/dist
+/ui/dist
+
--- a/frontend/.babelrc
+++ b/frontend/.babelrc
@ -1,7 +1,14 @@
 {
  "sourceMaps": "both",
  "presets": [
-    "react"
+    "react",
+    ["env", {
+      "targets": {
+        "browsers": [
+          "last 2 versions"
+        ]
+      }
+    }]
  ],
  "plugins": [
    "react-hot-loader/babel",
--- a/frontend/Makefile
+++ b/frontend/Makefile
@ -22,7 +22,7 @@ ui:

 .PHONY: test
 test: ui
-	BABEL_DISABLE_CACHE=1 NODE_ENV=test CONFIG=$(shell pwd)/webpack/index.js $(NYC) $(AVA) test/*.js $(TEST_ARGS)
+	NODE_ENV=test BABEL_DISABLE_CACHE=1 CONFIG=$(shell pwd)/webpack/index.js $(NYC) $(AVA) test/*.js $(TEST_ARGS)

 XUNIT_DIR := ${CIRCLE_TEST_REPORTS}/tap-xunit
 XUNIT := $(bindir)/tap-xunit
--- a/frontend/package.json
+++ b/frontend/package.json
@ -31,36 +31,37 @@
    "react-dom": "^15.4.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-intl": "^2.1.5",
-    "react-intl-redux": "^0.1.1",
+    "react-intl-redux": "^0.2.0",
    "react-redux": "^4.4.6",
    "react-router": "^4.0.0-alpha.4",
    "reduce-reducers": "^0.1.2",
    "redux": "^3.6.0",
    "redux-actions": "^1.1.0",
-    "redux-batched-actions": "^0.1.4",
+    "redux-batched-actions": "^0.1.5",
    "redux-logger": "^2.7.4",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.1.0",
-    "st": "^1.2.0"
+    "st": "^1.2.0",
+    "styled-components": "^1.1.3"
  },
  "devDependencies": {
    "ava": "^0.17.0",
    "babel-cli": "^6.18.0",
-    "babel-core": "^6.18.2",
+    "babel-core": "^6.20.0",
    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.8",
+    "babel-loader": "^6.2.9",
    "babel-plugin-add-module-exports": "^0.2.1",
    "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.19.0",
+    "babel-plugin-transform-object-rest-spread": "^6.20.2",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-plugin-webpack-loaders": "^0.8.0",
+    "babel-preset-env": "^1.0.2",
    "babel-preset-react": "^6.16.0",
    "babel-register": "^6.18.0",
-    "css-loader": "^0.26.1",
    "enzyme": "^2.6.0",
-    "eslint": "^3.11.1",
+    "eslint": "^3.12.0",
    "eslint-config-semistandard": "^7.0.0",
    "eslint-config-standard": "^6.2.1",
    "eslint-plugin-babel": "^4.0.0",
@ -68,23 +69,17 @@
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-react": "^6.8.0",
    "eslint-plugin-standard": "^2.0.1",
-    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "fast-async": "^6.1.2",
-    "ignore-loader": "^0.1.2",
    "json-loader": "^0.5.4",
    "ncp": "^2.0.0",
    "nyc": "^10.0.0",
-    "postcss-cssnext": "^2.9.0",
-    "postcss-loader": "^1.2.0",
-    "postcss-modules-values": "^1.2.2",
-    "pre-commit": "^1.1.3",
+    "pre-commit": "^1.2.1",
    "react-addons-test-utils": "^15.4.1",
-    "style-loader": "^0.13.1",
    "tap-xunit": "^1.4.0",
    "thenify": "^3.2.1",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^1.16.2",
-    "webpack-shell-plugin": "^0.4.6"
+    "webpack-shell-plugin": "^0.4.9"
  },
  "ava": {
    "failFast": true,
--- a/frontend/src/containers/home/home.css
+++ b/frontend/src/containers/home/home.css
@ -1,3 +0,0 @@
-.home {
-  background: red;
-}
--- a/frontend/src/containers/home/index.js
+++ b/frontend/src/containers/home/index.js
@ -1,18 +1,26 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
-const styles = require('./home.css');
+const Styled = require('styled-components');

 const {
  FormattedMessage
 } = ReactIntl;

+const {
+  default: styled
+} = Styled;
+
+const StyledWrapper = styled.div`
+  background-color: red;
+`;
+
 const Home = () => {
  return (
-    <div className={styles.home}>
+    <StyledWrapper>
      <h1>
        <FormattedMessage id='greetings' />
      </h1>
-    </div>
+    </StyledWrapper>
  );
 };

--- a/frontend/static/index.html
+++ b/frontend/static/index.html
@ -2,7 +2,6 @@
 <html lang='en-US'>
  <head>
    <title>Joyent Frontend</title>
-    <link href='/static/bundle.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id='root'></div>
@ -10,6 +9,6 @@
    <script src='/static/locales/pt-pt.js'></script>
    <script src='/static/locales/en.js'></script>
    <script src='/static/locales/en-us.js'></script>
-    <script src='/static/bundle.js'></script>
+    <script src='/static/main.js'></script>
  </body>
 </html>
--- a/frontend/test/index.js
+++ b/frontend/test/index.js
@ -1,23 +1,25 @@
 const test = require('ava');
+const enzyme = require('enzyme');
+const React = require('react');

-test('noop', (t) => {
-  t.deepEqual(1, 1);
+const {
+  shallow
+} = enzyme;
+
+test('renders <App> without exploding', (t) => {
+  const App = require('../src/containers/app');
+  const wrapper = shallow(<App />);
+  t.deepEqual(wrapper.length, 1);
 });

-// test('renders <App> without exploding', (t) => {
-//   const App = require('../src/containers/app');
-//   const wrapper = shallow(<App />);
-//   t.deepEqual(wrapper.length, 1);
-// });
-//
-// test('renders <Home> without exploding', (t) => {
-//   const Home = require('../src/containers/home');
-//   const wrapper = shallow(<Home />);
-//   t.deepEqual(wrapper.length, 1);
-// });
-//
-// test('renders <NotFound> without exploding', (t) => {
-//   const NotFound = require('../src/containers/not-found');
-//   const wrapper = shallow(<NotFound />);
-//   t.deepEqual(wrapper.length, 1);
-// });
+test('renders <Home> without exploding', (t) => {
+  const Home = require('../src/containers/home');
+  const wrapper = shallow(<Home />);
+  t.deepEqual(wrapper.length, 1);
+});
+
+test('renders <NotFound> without exploding', (t) => {
+  const NotFound = require('../src/containers/not-found');
+  const wrapper = shallow(<NotFound />);
+  t.deepEqual(wrapper.length, 1);
+});
--- a/frontend/webpack/base.js
+++ b/frontend/webpack/base.js
@ -1,4 +1,3 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const path = require('path');
 const fs = require('fs');

@ -26,12 +25,10 @@ module.exports = {
  output: {
    path: STATIC,
    publicPath: '/static/',
-    filename: 'bundle.js'
+    filename: '[name].js'
  },
  plugins: [
    plugins['no-errors'],
-    plugins['extract-text'],
-    plugins['loader-options'],
    plugins['define'],
    plugins['shell']
  ],
@ -46,19 +43,6 @@ module.exports = {
      exclude: /node_modules/,
      include: [CONTEXT],
      loaders: ['json-loader']
-    }, {
-      test: /\.css?$/,
-      exclude: /node_modules/,
-      include: [CONTEXT],
-      loader: ExtractTextPlugin.extract({
-        fallbackLoader: 'style-loader',
-        loader: [
-          'css-loader?',
-          'modules&importLoaders=1&',
-          'localIdentName=[name]__[local]___[hash:base64:5]!',
-          'postcss-loader'
-        ].join('')
-      })
    }]
  }
 };
--- a/frontend/webpack/plugins.js
+++ b/frontend/webpack/plugins.js
@ -1,4 +1,3 @@
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const pkg = require('../package.json');
 const webpack = require('webpack');
 const WebpackShellPlugin = require('webpack-shell-plugin');
@ -9,20 +8,6 @@ module.exports = {
  'aggressive-merging': new webpack.optimize.AggressiveMergingPlugin(),
  'hot-module-replacement': new webpack.HotModuleReplacementPlugin(),
  'named-modules': new webpack.NamedModulesPlugin(),
-  'extract-text': new ExtractTextPlugin({
-    filename: 'bundle.css',
-    allChunks: true
-  }),
-  'loader-options': new webpack.LoaderOptionsPlugin({
-    options: {
-      postcss: {
-        plugins: [
-          require('postcss-modules-values'),
-          require('postcss-cssnext')()
-        ]
-      }
-    }
-  }),
  'define': new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
--- a/frontend/webpack/production.js
+++ b/frontend/webpack/production.js
@ -8,17 +8,16 @@ module.exports = Object.assign(base, {
    './index.js'
  ],
  plugins: base.plugins.concat([
-    plugins['named-modules']
    // plugins['occurrence-order'],
    // plugins['aggressive-merging'],
    // plugins['uglify-js']
  ])
 });

-/*
+/**
 * Maybe add in the future:
 * - https://github.com/lettertwo/appcache-webpack-plugin
 * - https://github.com/NekR/offline-plugin
 * - https://github.com/goldhand/sw-precache-webpack-plugin
 * - https://github.com/Klathmon/imagemin-webpack-plugin
- */
+ **/
--- a/frontend/webpack/test.js
+++ b/frontend/webpack/test.js
@ -24,14 +24,21 @@ module.exports = {
    libraryTarget: 'commonjs2'
  },
  plugins: [
+    plugins['named-modules'],
    plugins['no-errors'],
-    plugins['loader-options'],
    plugins['define']
  ],
  module: {
    loaders: [{
-      test: /\.css?$/,
-      loader: 'ignore-loader'
+      test: /js?$/,
+      exclude: /node_modules/,
+      include: [CONTEXT],
+      loaders: ['babel-loader']
+    }, {
+      test: /\.json?$/,
+      exclude: /node_modules/,
+      include: [CONTEXT],
+      loaders: ['json-loader']
    }]
  }
 };
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock