mirror of
https://github.com/yldio/copilot.git
synced 2024-11-13 06:40:06 +02:00
upgrade frontend to styled-components
This commit is contained in:
Sérgio Ramos
parent
c3db3494f3
commit
43af2d0785
3
.gitignore
vendored
3
.gitignore
vendored
@ -151,4 +151,5 @@ $RECYCLE.BIN/
|
||||
|
||||
/cloudapi-graphql/credentials.json
|
||||
tap-xunit
|
||||
/dist
|
||||
/ui/dist
|
||||
|
||||
|
||||
@ -1,7 +1,14 @@
|
||||
{
|
||||
"sourceMaps": "both",
|
||||
"presets": [
|
||||
"react"
|
||||
"react",
|
||||
["env", {
|
||||
"targets": {
|
||||
"browsers": [
|
||||
"last 2 versions"
|
||||
]
|
||||
}
|
||||
}]
|
||||
],
|
||||
"plugins": [
|
||||
"react-hot-loader/babel",
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.home {
|
||||
background: red;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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);
|
||||
});
|
||||
|
||||
@ -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('')
|
||||
})
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
@ -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'),
|
||||
|
||||
@ -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
|
||||
*/
|
||||
**/
|
||||
|
||||
@ -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']
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
1327
frontend/yarn.lock
1327
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user