use styled-components@2

and updated all other dependencies
This commit is contained in:
Sérgio Ramos 2017-02-06 14:51:55 +00:00
parent 087d420f85
commit 0fc136c6ae
27 changed files with 1184 additions and 826 deletions

View File

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

View File

@ -86,7 +86,7 @@
"jsx-a11y/label-has-for": 2, "jsx-a11y/label-has-for": 2,
"jsx-a11y/lang": 2, "jsx-a11y/lang": 2,
"jsx-a11y/no-access-key": 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-onchange": 2,
"jsx-a11y/no-static-element-interactions": 1, "jsx-a11y/no-static-element-interactions": 1,
"jsx-a11y/onclick-has-focus": 2, "jsx-a11y/onclick-has-focus": 2,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -86,7 +86,7 @@
"jsx-a11y/label-has-for": 2, "jsx-a11y/label-has-for": 2,
"jsx-a11y/lang": 2, "jsx-a11y/lang": 2,
"jsx-a11y/no-access-key": 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-onchange": 2,
"jsx-a11y/no-static-element-interactions": 1, "jsx-a11y/no-static-element-interactions": 1,
"jsx-a11y/onclick-has-focus": 2, "jsx-a11y/onclick-has-focus": 2,

View File

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

View File

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

File diff suppressed because it is too large Load Diff