Merge pull request react-toolbox#41 from olegstepura/master

[email protected], [email protected] and [email protected]

Author: javivelasco

.sass-lint.yml

@@ -1,7 +1,7 @@
 {
   "name": "react-toolbox-example",
   "description": "A set of complementary tools to ReactJS.",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "author": {
     "name": "React Toolbox Team",
     "url": "http://github.com/react-toolbox"
@@ -16,6 +16,11 @@
       "name": "Javi Velasco Arjona",
       "email": "[email protected]",
       "url": "http://javivelasco.com/"
+    },
+    {
+      "name": "Oleg Stepura",
+      "email": "oleg[at]stepura.com",
+      "url": "http://oleg.stepura.com/"
     }
   ],
   "repository": {
@@ -33,46 +38,45 @@
     "react-component",
     "toolbox"
   ],
+  "engines": {
+    "node": ">=4.3.0",
+    "npm": ">=4.0.1"
+  },
+  "dependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-toolbox": "^2.0.0-beta.5",
+    "react-addons-css-transition-group": "^15.4.2"
+  },
   "devDependencies": {
-    "autoprefixer": "~6.4.0",
-    "babel-core": "~6.13.2",
-    "babel-eslint": "~6.0.4",
-    "babel-loader": "~6.0.1",
-    "babel-plugin-react-transform": "~2.0.2",
-    "babel-preset-es2015": "~6.1.4",
-    "babel-preset-react": "~6.1.4",
-    "babel-preset-stage-0": "~6.5.0",
-    "classnames": "~2.2.1",
-    "cross-env": "~2.0.0",
-    "css-loader": "~0.23.1",
-    "eslint": "~3.3.1",
-    "eslint-plugin-babel": "~3.2.0",
-    "eslint-plugin-react": "~6.1.2",
-    "express": "~4.13.3",
-    "extract-text-webpack-plugin": "~1.0.1",
-    "internal-ip": "~1.2.0",
-    "node-sass": "~3.8.0",
-    "normalize.css": "~4.2.0",
-    "postcss-loader": "~0.10.1",
-    "react": "~15.3.0",
-    "react-addons-css-transition-group": "~15.3.0",
-    "react-addons-update": "~15.3.0",
-    "react-dom": "~15.3.0",
-    "react-toolbox": "~1.1.2",
-    "react-transform-catch-errors": "~1.0.0",
-    "react-transform-hmr": "~1.0.1",
-    "redbox-react": "~1.3.0",
-    "sass-lint": "~1.7.0",
-    "sass-loader": "~4.0.0",
-    "style-loader": "~0.13.1",
-    "webpack": "~1.13.2",
-    "webpack-dev-middleware": "~1.6.1",
-    "webpack-hot-middleware": "~2.12.2"
+    "autoprefixer": "^6.6.1",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "~7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-node-env-inline": "^6.8.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-2": "^6.18.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
+    "eslint": "~3.14.0",
+    "eslint-plugin-babel": "~4.0.1",
+    "eslint-plugin-react": "^6.9.0",
+    "postcss-cssnext": "^2.9.0",
+    "postcss-each": "^0.9.3",
+    "postcss-import": "^9.1.0",
+    "postcss-loader": "^1.2.2",
+    "postcss-mixins": "^5.4.1",
+    "react-hot-loader": "^3.0.0-beta.6",
+    "redux-devtools-extension": "^1.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
   },
   "scripts": {
-    "build": "cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config webpack.config",
-    "deploy": "gh-pages -d build",
-    "start": "node server"
+    "start": "node_modules/.bin/cross-env NODE_ENV=development node_modules/.bin/webpack-dev-server --colors --config webpack.config.js",
+    "build": "node_modules/.bin/cross-env NODE_ENV=production UV_THREADPOOL_SIZE=100 webpack --config webpack.config.js",
+    "deploy": "gh-pages -d build"
   },
   "license": "MIT",
   "homepage": "https://github.com/react-toolbox/react-toolbox-example#readme"

package.json

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {
+      root: __dirname,
+    },
+    'postcss-mixins': {},
+    'postcss-each': {},
+    'postcss-cssnext': {}
+  },
+};

postcss.config.js

@@ -1,5 +1,4 @@
 import React from 'react';
-// import 'react-toolbox/lib/commons.scss';           // Import common styles
 import PurpleAppBar from './PurpleAppBar.js';      // AppBar with simple overrides
 import SuccessButton from './SuccessButton.js';    // A button with complex overrides
 import { Button } from 'react-toolbox/lib/button'; // Bundled component import

server.js

@@ -0,0 +1,9 @@
+.appBar {
+  background-color: #800080;
+}
+.appBar svg {
+  width: 3.4rem;
+  height: 3.4rem;
+  margin-right: 1rem;
+  fill: #fff;
+}

src/app/PurpleAppBar.scss

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { AppBar } from 'react-toolbox/lib/app_bar';
 import Logo from './Logo.js';
-import theme from './PurpleAppBar.scss';
+import theme from './PurpleAppBar.css';
 
 const PurpleAppBar = ({ children, ...other }) => (
   <AppBar {...other} theme={theme}>

src/app/SuccessButton.scss

@@ -0,0 +1,5 @@
+@import "react-toolbox/lib/button/theme.css";
+
+.button {
+  background-color: var(--palette-green-700) !important;
+}

src/app/client.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button } from 'react-toolbox/lib/button';
-import theme from './SuccessButton.scss';
+import theme from './SuccessButton.css';
 
 const SuccessButton = (props) => <Button {...props} theme={theme} />;
 export default SuccessButton;

src/app/theme/_config.scss

@@ -0,0 +1,30 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './component/App';
+import { AppContainer } from 'react-hot-loader';
+import { overrideComponentTypeChecker } from 'react-toolbox';
+
+const rootEl = document.getElementById('app');
+
+const render = () => {
+  ReactDOM.render(
+    <AppContainer>
+      <App />
+    </AppContainer>,
+    rootEl
+  );
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  overrideComponentTypeChecker((classType, reactElement) => (
+    reactElement && (
+      reactElement.type === classType
+      || reactElement.type.name === classType.displayName
+    )
+  ));
+  if (module.hot) {
+    module.hot.accept('./component/App', render);
+  }
+}
+
+render();

src/app/App.js renamed to src/frontend/component/App.js

@@ -15,12 +15,11 @@
     <meta http-equiv="cleartype" content="on">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
-    <link rel="stylesheet" href="bundle.css">
+    <style>html, body { margin: 0; padding: 0; }</style>
   </head>
 
   <body>
     <div id="app"></div>
-    <script src="vendor.bundle.js"></script>
     <script src="bundle.js"></script>
   </body>
 </html>