diff --git a/packages/unleash-frontend-next/.babelrc b/packages/unleash-frontend-next/.babelrc
index add9397672..4d3b7d3676 100644
--- a/packages/unleash-frontend-next/.babelrc
+++ b/packages/unleash-frontend-next/.babelrc
@@ -1,5 +1,5 @@
{
- "presets": ["react", "es2015", "stage-0"],
+ "presets": ["react", "es2015", "stage-2"],
"env": {
"development": {
"presets": ["react-hmre"]
diff --git a/packages/unleash-frontend-next/index.html b/packages/unleash-frontend-next/index.html
index 13b2b447c5..ae65d99b7e 100644
--- a/packages/unleash-frontend-next/index.html
+++ b/packages/unleash-frontend-next/index.html
@@ -2,10 +2,10 @@
Sample App
+
-
-
+
diff --git a/packages/unleash-frontend-next/package.json b/packages/unleash-frontend-next/package.json
index 37f20ee179..bc1b0f9b06 100644
--- a/packages/unleash-frontend-next/package.json
+++ b/packages/unleash-frontend-next/package.json
@@ -29,9 +29,11 @@
},
"main": "./lib/index.js",
"dependencies": {
+ "immutability-helper": "^2.0.0",
"react": "^15.3.1",
"react-dom": "^15.3.1",
- "react-router": "^2.8.0"
+ "react-router": "^2.8.0",
+ "react-toolbox": "^1.2.1"
},
"devDependencies": {
"babel-core": "^6.14.0",
@@ -40,6 +42,14 @@
"babel-preset-react": "^6.11.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.5.0",
+ "babel-preset-stage-2": "^6.13.0",
+ "css-loader": "^0.25.0",
+ "extract-text-webpack-plugin": "^1.0.1",
+ "node-sass": "~3.7.0",
+ "postcss-loader": "^0.13.0",
+ "sass-loader": "^4.0.2",
+ "style-loader": "^0.13.1",
+ "toolbox-loader": "0.0.3",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
},
diff --git a/packages/unleash-frontend-next/src/App.jsx b/packages/unleash-frontend-next/src/App.jsx
index 36387b0b70..0df8deaa1a 100644
--- a/packages/unleash-frontend-next/src/App.jsx
+++ b/packages/unleash-frontend-next/src/App.jsx
@@ -1,9 +1,20 @@
import React, { Component } from 'react';
+import { AppBar } from 'react-toolbox/lib/app_bar';
+import { Navigation} from 'react-toolbox/lib/navigation';
+import Link from 'react-toolbox/lib/link';
export default class App extends Component {
render () {
return (
- Hello, world
+
+
+
+
+
+
+
+
+
);
}
};
diff --git a/packages/unleash-frontend-next/src/index.js b/packages/unleash-frontend-next/src/index.js
index b597a44232..a22f17594a 100644
--- a/packages/unleash-frontend-next/src/index.js
+++ b/packages/unleash-frontend-next/src/index.js
@@ -2,4 +2,4 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
-ReactDOM.render(, document.getElementById('root'));
+ReactDOM.render(, document.getElementById('app'));
diff --git a/packages/unleash-frontend-next/src/theme/_config.scss b/packages/unleash-frontend-next/src/theme/_config.scss
new file mode 100644
index 0000000000..35e259d1be
--- /dev/null
+++ b/packages/unleash-frontend-next/src/theme/_config.scss
@@ -0,0 +1,11 @@
+@import "~react-toolbox/lib/colors";
+
+$color-primary: $palette-blue-500;
+$color-primary-dark: $palette-blue-700;
+
+body {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ outline: 0;
+}
diff --git a/packages/unleash-frontend-next/webpack.config.js b/packages/unleash-frontend-next/webpack.config.js
index 935d110e07..466ef39cb2 100644
--- a/packages/unleash-frontend-next/webpack.config.js
+++ b/packages/unleash-frontend-next/webpack.config.js
@@ -4,6 +4,7 @@
const path = require('path');
const webpack = require('webpack');
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
@@ -14,7 +15,7 @@ module.exports = {
resolve: {
root: [path.join(__dirname, 'src')],
- extensions: ['', '.js', '.jsx'],
+ extensions: ['', '.scss', '.css', '.js', '.jsx', '.json'],
modulesDirectories: ['web_modules', 'node_modules'],
},
@@ -32,15 +33,28 @@ module.exports = {
loaders: ['babel'],
include: path.join(__dirname, 'src'),
},
+ {
+ test: /(\.scss|\.css)$/,
+ loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass')
+
+ },
],
},
plugins: [
+ new ExtractTextPlugin('bundle.css', { allChunks: true }),
new webpack.HotModuleReplacementPlugin(),
],
+ sassLoader: {
+ data: '@import "theme/_config.scss";',
+ includePaths: [path.resolve(__dirname, './src')]
+ },
+
devtool: 'source-map',
+ toolbox: {theme: 'src/theme/_config.scss'},
+
externals: {
// stuff not in node_modules can be resolved here.
},