From 55af294e33b67c1edde5a44c8cd8cb6d7777e56c Mon Sep 17 00:00:00 2001 From: ivaosthu Date: Mon, 12 Sep 2016 18:46:33 +0200 Subject: [PATCH] adde react-toolbox with custom theme hook #153 --- packages/unleash-frontend-next/.babelrc | 2 +- packages/unleash-frontend-next/index.html | 4 ++-- packages/unleash-frontend-next/package.json | 12 +++++++++++- packages/unleash-frontend-next/src/App.jsx | 13 ++++++++++++- packages/unleash-frontend-next/src/index.js | 2 +- .../unleash-frontend-next/src/theme/_config.scss | 11 +++++++++++ packages/unleash-frontend-next/webpack.config.js | 16 +++++++++++++++- 7 files changed, 53 insertions(+), 7 deletions(-) create mode 100644 packages/unleash-frontend-next/src/theme/_config.scss diff --git a/packages/unleash-frontend-next/.babelrc b/packages/unleash-frontend-next/.babelrc index add93976724..4d3b7d36768 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 13b2b447c5b..ae65d99b7ed 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 37f20ee179d..bc1b0f9b06b 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 36387b0b70a..0df8deaa1a1 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 b597a44232c..a22f17594a2 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 00000000000..35e259d1bef --- /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 935d110e07d..466ef39cb29 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. },