update to react-toolbox 2.0 beta

package.json

@@ -84,13 +84,11 @@
     "jest": "^20.0.4",
     "jest-cli": "^20.0.4",
     "lint-staged": "^3.3.1",
-    "node-sass": "^3.10.0",
     "npm-check": "^5.2.3",
     "postcss-cssnext": "^2.7.0",
     "postcss-import": "^10.0.0",
     "postcss-loader": "^2.0.5",
     "react-addons-test-utils": "^15.4.2",
-    "sass-loader": "^6.0.5",
     "style-loader": "^0.18.2",
     "stylefmt": "^4.3.1",
     "stylelint": "^7.9.0",
@@ -137,8 +135,8 @@
     "react-sidebar": "^2.2.1",
     "react-simple-dnd": "^0.1.2",
     "react-sortable": "^1.2.0",
-    "react-split-pane": "^0.1.57",
+    "react-split-pane": "^0.1.66",
-    "react-toolbox": "^1.2.1",
+    "react-toolbox": "^2.0.0-beta.12",
     "react-topbar-progress-indicator": "^1.0.0",
     "react-transition-group": "^2.2.1",
     "react-waypoint": "^7.1.0",

src/containers/App.js

@@ -4,7 +4,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { IndexLink } from "react-router";
 import FontIcon from 'react-toolbox/lib/font_icon';
-import { Layout, Panel } from 'react-toolbox/lib/layout';
 import { Navigation } from 'react-toolbox/lib/navigation';
 import { Notifs } from 'redux-notifications';
 import TopBarProgress from 'react-topbar-progress-indicator';
@@ -181,7 +180,7 @@ class App extends React.Component {
 
     return (
       <Sidebar content={sidebarContent}>
-        <Layout>
+        <div>
           <Notifs CustomComponent={Toast} />
           <AppHeader
             user={user}
@@ -191,14 +190,13 @@ class App extends React.Component {
             onLogoutClick={logoutUser}
             toggleDrawer={toggleSidebar}
           />
-          <Panel scrollY className={styles.entriesPanel}>
+          <div className={styles.entriesPanel}>
             { isFetching && <TopBarProgress /> }
             <div>
               {children}
             </div>
-          </Panel>
+          </div>
-
+        </div>
-        </Layout>
       </Sidebar>
     );
   }

src/index.css

@@ -1,3 +1,4 @@
+@import "react-toolbox-global.css";
 @import "material-icons.css";
 @import "components/UI/theme.css";
 

src/index.js

@@ -3,7 +3,7 @@ import createReactClass from 'create-react-class';
 import { render } from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 import 'file-loader?name=index.html!../example/index.html';
-import 'react-toolbox/lib/commons.scss';
+import 'normalize.css';
 import Root from './root';
 import registry from './lib/registry';
 import './index.css';

src/react-toolbox-global.css

@@ -0,0 +1,114 @@
+/*
+ * Manual copy of global styles from React Toolbox 1.x, per the migration guide:
+ * https://github.com/react-toolbox/react-toolbox/wiki/Migrating-from-version-1.3-to-2.0/9f5056c60d9ed7f3765908f68aca20c373e6f3e9
+ *
+ * Should eventually be removed, but currently required.
+ */
+:global {
+  & html {
+    font-size: 62.5%;
+  }
+
+  & body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    font-size: 1.6rem;
+    -webkit-touch-callout: none;
+    * {
+      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    }
+  }
+
+  & a, & abbr, & address, & article, & aside, & audio, & b, & blockquote, & body, & caption, & cite,
+  & code, & dd, & del, & dfn, & dialog, & div, & dl, & dt, & em, & fieldset, & figure, & footer,
+  & form, & h1, & h2, & h3, & h4, & h5, & h6, & header, & hgroup, & hr, & html, & i, & iframe,
+  & img, & ins, & kbd, & label, & legend, & li, & mark, & menu, & nav, & object, & ol, & p, & pre,
+  & q, & samp, & section, & small, & span, & strong, & sub, & sup, & table, & tbody, & td, & tfoot,
+  & th, & thead, & time, & tr, & ul, & var, & video {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    outline: 0;
+  }
+
+  & *, & *:before, & *:after {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+  }
+
+  & a {
+    text-decoration: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  & input:not([type="checkbox"]):not([type="radio"]),
+  & button {
+    outline: none;
+    appearance: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  }
+
+  /* Remove firefox default style for required inputs */
+  & input[required]:-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  & h1, & h2, & h3, & h4, & h5, & h6, & label, & p, & button, & abbr, & a, & span, & small {
+    font-smoothing: antialiased;
+    text-size-adjust: 100%;
+  }
+
+  & h1 small, & h2 small, & h3 small, & h4 small, & h5 small, & h6 small {
+    font-size: 5.6rem;
+    font-weight: 400;
+    line-height: 1.35;
+    opacity: .54;
+  }
+
+  & h1 {
+    font-size: 5.6rem;
+    font-weight: 400;
+    line-height: 1.35;
+  }
+
+  & h2 {
+    font-size: 4.5rem;
+    font-weight: 400;
+    line-height: 4.8rem;
+  }
+
+  & h3 {
+    font-size: 3.4rem;
+    font-weight: 400;
+    line-height: 4rem;
+  }
+
+  & h4 {
+    font-size: 2.4rem;
+    font-weight: 400;
+    line-height: 3.2rem;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  & h5 {
+    font-size: 2rem;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  & h6 {
+    font-size: 1.6rem;
+    font-weight: 400;
+    line-height: 2.4rem;
+  }
+
+  & p {
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2.4rem;
+  }
+}

webpack.base.js

@@ -17,28 +17,26 @@ module.exports = {
            List all of theme in the array
         */
         test: /\.css$/,
-        include: [/redux-notifications/],
+        include: [/redux-notifications/, /react-toolbox/, /normalize.css/],
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader',
-        }),
-      },
-      {
-        /* React-toolbox still relies on SCSS and css-modules */
-        test: /\.scss$/,
-        include: [/react-toolbox/],
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [
-            { loader: "css-loader", options: { modules: true } },
+            {
-            "sass-loader",
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                importLoaders: 1,
+                localIdentName: "[name]__[local]__[hash:base64:8]"
+              },
+            },
+            { loader: 'postcss-loader' },
           ],
         }),
       },
       {
         /* We use CSS-modules and PostCSS for CMS styles */
         test: /\.css$/,
-        exclude: /node_modules/,
+        exclude: [/node_modules/],
         use: ExtractTextPlugin.extract({
           fallback: 'style-loader',
           use: [