Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

upgrade frontend to styled-components

Browse Source
This commit is contained in:
Sérgio Ramos 2016-12-12 10:56:48 +00:00
parent c3db3494f3
commit 43af2d0785
13 changed files with 371 additions and 1108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -151,4 +151,5 @@ $RECYCLE.BIN/
/cloudapi-graphql/credentials.json /cloudapi-graphql/credentials.json
tap-xunit tap-xunit
/dist /ui/dist

9
frontend/.babelrc
View File

@ -1,7 +1,14 @@
{ {
"sourceMaps": "both", "sourceMaps": "both",
"presets": [ "presets": [
"react" "react",
["env", {
"targets": {
"browsers": [
"last 2 versions"
]
}
}]
], ],
"plugins": [ "plugins": [
"react-hot-loader/babel", "react-hot-loader/babel",

2
frontend/Makefile
View File

@ -22,7 +22,7 @@ ui:
.PHONY: test .PHONY: test
test: ui 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_DIR := ${CIRCLE_TEST_REPORTS}/tap-xunit
XUNIT := $(bindir)/tap-xunit XUNIT := $(bindir)/tap-xunit

27
frontend/package.json
View File

@ -31,36 +31,37 @@
"react-dom": "^15.4.1", "react-dom": "^15.4.1",
"react-hot-loader": "^3.0.0-beta.6", "react-hot-loader": "^3.0.0-beta.6",
"react-intl": "^2.1.5", "react-intl": "^2.1.5",
"react-intl-redux": "^0.1.1", "react-intl-redux": "^0.2.0",
"react-redux": "^4.4.6", "react-redux": "^4.4.6",
"react-router": "^4.0.0-alpha.4", "react-router": "^4.0.0-alpha.4",
"reduce-reducers": "^0.1.2", "reduce-reducers": "^0.1.2",
"redux": "^3.6.0", "redux": "^3.6.0",
"redux-actions": "^1.1.0", "redux-actions": "^1.1.0",
"redux-batched-actions": "^0.1.4", "redux-batched-actions": "^0.1.5",
"redux-logger": "^2.7.4", "redux-logger": "^2.7.4",
"redux-promise-middleware": "^4.2.0", "redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.1.0", "redux-thunk": "^2.1.0",
"st": "^1.2.0" "st": "^1.2.0",
"styled-components": "^1.1.3"
}, },
"devDependencies": { "devDependencies": {
"ava": "^0.17.0", "ava": "^0.17.0",
"babel-cli": "^6.18.0", "babel-cli": "^6.18.0",
"babel-core": "^6.18.2", "babel-core": "^6.20.0",
"babel-eslint": "^7.1.1", "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-add-module-exports": "^0.2.1",
"babel-plugin-syntax-async-functions": "^6.13.0", "babel-plugin-syntax-async-functions": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.16.0", "babel-plugin-transform-async-to-generator": "^6.16.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.18.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-transform-runtime": "^6.15.0",
"babel-plugin-webpack-loaders": "^0.8.0", "babel-plugin-webpack-loaders": "^0.8.0",
"babel-preset-env": "^1.0.2",
"babel-preset-react": "^6.16.0", "babel-preset-react": "^6.16.0",
"babel-register": "^6.18.0", "babel-register": "^6.18.0",
"css-loader": "^0.26.1",
"enzyme": "^2.6.0", "enzyme": "^2.6.0",
"eslint": "^3.11.1", "eslint": "^3.12.0",
"eslint-config-semistandard": "^7.0.0", "eslint-config-semistandard": "^7.0.0",
"eslint-config-standard": "^6.2.1", "eslint-config-standard": "^6.2.1",
"eslint-plugin-babel": "^4.0.0", "eslint-plugin-babel": "^4.0.0",
@ -68,23 +69,17 @@
"eslint-plugin-promise": "^3.4.0", "eslint-plugin-promise": "^3.4.0",
"eslint-plugin-react": "^6.8.0", "eslint-plugin-react": "^6.8.0",
"eslint-plugin-standard": "^2.0.1", "eslint-plugin-standard": "^2.0.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"fast-async": "^6.1.2", "fast-async": "^6.1.2",
"ignore-loader": "^0.1.2",
"json-loader": "^0.5.4", "json-loader": "^0.5.4",
"ncp": "^2.0.0", "ncp": "^2.0.0",
"nyc": "^10.0.0", "nyc": "^10.0.0",
"postcss-cssnext": "^2.9.0", "pre-commit": "^1.2.1",
"postcss-loader": "^1.2.0",
"postcss-modules-values": "^1.2.2",
"pre-commit": "^1.1.3",
"react-addons-test-utils": "^15.4.1", "react-addons-test-utils": "^15.4.1",
"style-loader": "^0.13.1",
"tap-xunit": "^1.4.0", "tap-xunit": "^1.4.0",
"thenify": "^3.2.1", "thenify": "^3.2.1",
"webpack": "^2.1.0-beta.25", "webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^1.16.2", "webpack-dev-server": "^1.16.2",
"webpack-shell-plugin": "^0.4.6" "webpack-shell-plugin": "^0.4.9"
}, },
"ava": { "ava": {
"failFast": true, "failFast": true,

3
frontend/src/containers/home/home.css
View File

@ -1,3 +0,0 @@
.home {
background: red;
}

14
frontend/src/containers/home/index.js
View File

@ -1,18 +1,26 @@
const React = require('react'); const React = require('react');
const ReactIntl = require('react-intl'); const ReactIntl = require('react-intl');
const styles = require('./home.css'); const Styled = require('styled-components');
const { const {
FormattedMessage FormattedMessage
} = ReactIntl; } = ReactIntl;
const {
default: styled
} = Styled;
const StyledWrapper = styled.div`
background-color: red;
`;
const Home = () => { const Home = () => {
return ( return (
<div className={styles.home}> <StyledWrapper>
<h1> <h1>
<FormattedMessage id='greetings' /> <FormattedMessage id='greetings' />
</h1> </h1>
</div> </StyledWrapper>
); );
}; };

3
frontend/static/index.html
View File

@ -2,7 +2,6 @@
<html lang='en-US'> <html lang='en-US'>
<head> <head>
<title>Joyent Frontend</title> <title>Joyent Frontend</title>
<link href='/static/bundle.css' rel='stylesheet' type='text/css'>
</head> </head>
<body> <body>
<div id='root'></div> <div id='root'></div>
@ -10,6 +9,6 @@
<script src='/static/locales/pt-pt.js'></script> <script src='/static/locales/pt-pt.js'></script>
<script src='/static/locales/en.js'></script> <script src='/static/locales/en.js'></script>
<script src='/static/locales/en-us.js'></script> <script src='/static/locales/en-us.js'></script>
<script src='/static/bundle.js'></script> <script src='/static/main.js'></script>
</body> </body>
</html> </html>

40
frontend/test/index.js
View File

@ -1,23 +1,25 @@
const test = require('ava'); const test = require('ava');
const enzyme = require('enzyme');
const React = require('react');
test('noop', (t) => { const {
t.deepEqual(1, 1); 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) => { test('renders <Home> without exploding', (t) => {
// const App = require('../src/containers/app'); const Home = require('../src/containers/home');
// const wrapper = shallow(<App />); const wrapper = shallow(<Home />);
// t.deepEqual(wrapper.length, 1); t.deepEqual(wrapper.length, 1);
// }); });
//
// test('renders <Home> without exploding', (t) => { test('renders <NotFound> without exploding', (t) => {
// const Home = require('../src/containers/home'); const NotFound = require('../src/containers/not-found');
// const wrapper = shallow(<Home />); const wrapper = shallow(<NotFound />);
// t.deepEqual(wrapper.length, 1); 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);
// });

18
frontend/webpack/base.js
View File

@ -1,4 +1,3 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path'); const path = require('path');
const fs = require('fs'); const fs = require('fs');
@ -26,12 +25,10 @@ module.exports = {
output: { output: {
path: STATIC, path: STATIC,
publicPath: '/static/', publicPath: '/static/',
filename: 'bundle.js' filename: '[name].js'
}, },
plugins: [ plugins: [
plugins['no-errors'], plugins['no-errors'],
plugins['extract-text'],
plugins['loader-options'],
plugins['define'], plugins['define'],
plugins['shell'] plugins['shell']
], ],
@ -46,19 +43,6 @@ module.exports = {
exclude: /node_modules/, exclude: /node_modules/,
include: [CONTEXT], include: [CONTEXT],
loaders: ['json-loader'] 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('')
})
}] }]
} }
}; };

15
frontend/webpack/plugins.js
View File

@ -1,4 +1,3 @@
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const pkg = require('../package.json'); const pkg = require('../package.json');
const webpack = require('webpack'); const webpack = require('webpack');
const WebpackShellPlugin = require('webpack-shell-plugin'); const WebpackShellPlugin = require('webpack-shell-plugin');
@ -9,20 +8,6 @@ module.exports = {
'aggressive-merging': new webpack.optimize.AggressiveMergingPlugin(), 'aggressive-merging': new webpack.optimize.AggressiveMergingPlugin(),
'hot-module-replacement': new webpack.HotModuleReplacementPlugin(), 'hot-module-replacement': new webpack.HotModuleReplacementPlugin(),
'named-modules': new webpack.NamedModulesPlugin(), '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({ 'define': new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'), NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),

5
frontend/webpack/production.js
View File

@ -8,17 +8,16 @@ module.exports = Object.assign(base, {
'./index.js' './index.js'
], ],
plugins: base.plugins.concat([ plugins: base.plugins.concat([
plugins['named-modules']
// plugins['occurrence-order'], // plugins['occurrence-order'],
// plugins['aggressive-merging'], // plugins['aggressive-merging'],
// plugins['uglify-js'] // plugins['uglify-js']
]) ])
}); });
/* /**
* Maybe add in the future: * Maybe add in the future:
* - https://github.com/lettertwo/appcache-webpack-plugin * - https://github.com/lettertwo/appcache-webpack-plugin
* - https://github.com/NekR/offline-plugin * - https://github.com/NekR/offline-plugin
* - https://github.com/goldhand/sw-precache-webpack-plugin * - https://github.com/goldhand/sw-precache-webpack-plugin
* - https://github.com/Klathmon/imagemin-webpack-plugin * - https://github.com/Klathmon/imagemin-webpack-plugin
*/ **/

13
frontend/webpack/test.js
View File

@ -24,14 +24,21 @@ module.exports = {
libraryTarget: 'commonjs2' libraryTarget: 'commonjs2'
}, },
plugins: [ plugins: [
plugins['named-modules'],
plugins['no-errors'], plugins['no-errors'],
plugins['loader-options'],
plugins['define'] plugins['define']
], ],
module: { module: {
loaders: [{ loaders: [{
test: /\.css?$/, test: /js?$/,
loader: 'ignore-loader' exclude: /node_modules/,
include: [CONTEXT],
loaders: ['babel-loader']
}, {
test: /\.json?$/,
exclude: /node_modules/,
include: [CONTEXT],
loaders: ['json-loader']
}] }]
} }
}; };

1327
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff