mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01:00 
			
		
		
		
	adde react-toolbox with custom theme hook #153
This commit is contained in:
		
							parent
							
								
									4cf2a8c791
								
							
						
					
					
						commit
						55af294e33
					
				| @ -1,5 +1,5 @@ | ||||
| { | ||||
|   "presets": ["react", "es2015", "stage-0"], | ||||
|   "presets": ["react", "es2015", "stage-2"], | ||||
|   "env": { | ||||
|     "development": { | ||||
|       "presets": ["react-hmre"] | ||||
|  | ||||
| @ -2,10 +2,10 @@ | ||||
| <html> | ||||
|   <head> | ||||
|     <title>Sample App</title> | ||||
|     <link rel="stylesheet" href="/static/bundle.css" /> | ||||
|   </head> | ||||
|   <body> | ||||
|     <div id='root'> | ||||
|     </div> | ||||
|     <div id='app'></div> | ||||
|     <script src="/static/bundle.js"></script> | ||||
|   </body> | ||||
| </html> | ||||
|  | ||||
| @ -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" | ||||
|   }, | ||||
|  | ||||
| @ -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 ( | ||||
|             <h1>Hello, world</h1> | ||||
|             <AppBar> | ||||
|                 <div> | ||||
|                     <Navigation type='horizontal' className="navigation"> | ||||
|                         <Link href='' label='Feature Toggles' /> | ||||
|                         <Link href='' active label='Strategies'  /> | ||||
|                         <Link href='' active label='Documentation'  /> | ||||
|                     </Navigation> | ||||
|                 </div> | ||||
|             </AppBar> | ||||
|         ); | ||||
|     } | ||||
| }; | ||||
|  | ||||
| @ -2,4 +2,4 @@ import React from 'react'; | ||||
| import ReactDOM from 'react-dom'; | ||||
| import App from './App'; | ||||
| 
 | ||||
| ReactDOM.render(<App />, document.getElementById('root')); | ||||
| ReactDOM.render(<App />, document.getElementById('app')); | ||||
|  | ||||
							
								
								
									
										11
									
								
								packages/unleash-frontend-next/src/theme/_config.scss
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										11
									
								
								packages/unleash-frontend-next/src/theme/_config.scss
									
									
									
									
									
										Normal file
									
								
							| @ -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; | ||||
| } | ||||
| @ -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.
 | ||||
|     }, | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user