Hack map and toolbar view

.eslintrc.yml

@@ -1,81 +0,0 @@
----
-  extends:
-    - plugin:react/recommended
-
-  env:
-    browser: true
-    node: true
-    es6: true
-
-  parserOptions:
-   ecmaVersion: 6
-   sourceType: "module"
-   ecmaFeatures:
-    jsx: true
-
-  globals:
-    __DEV__: true
-    __SERVER__: true
-
-  plugins:
-    - react
-
-  rules:
-    react/jsx-uses-vars: 1
-    react/prop-types: [1, { ignore: [children] }]
-
-    semi: 0
-    key-spacing: 1
-    curly: 0
-    consistent-return: 0
-    space-infix-ops: 1
-    camelcase: 0
-    no-spaced-func: 1
-    no-alert: 1
-    eol-last: 1
-    comma-spacing: 1
-    eqeqeq: 1
-
-    # possible errors
-    comma-dangle: 0
-    no-cond-assign: 2
-    no-console: 0
-    no-constant-condition: 2
-    no-control-regex: 2
-    no-debugger: 2
-    no-dupe-args: 2
-    no-dupe-keys: 2
-    no-duplicate-case: 2
-    no-empty-character-class: 2
-    no-empty: 2
-    no-ex-assign: 2
-    no-extra-boolean-cast: 2
-    no-extra-parens: 0
-    no-extra-semi: 2
-    no-func-assign: 2
-    no-inner-declarations: 2
-    no-invalid-regexp: 2
-    no-irregular-whitespace: 2
-    no-negated-in-lhs: 2
-    no-obj-calls: 2
-    no-regex-spaces: 2
-    no-sparse-arrays: 2
-    no-unexpected-multiline: 2
-    no-unreachable: 2
-    use-isnan: 2
-    valid-jsdoc: 2
-    valid-typeof: 2
-
-    no-redeclare: 2
-
-    init-declarations: 2
-    no-catch-shadow: 2
-    no-delete-var: 2
-    no-label-var: 2
-    no-shadow-restricted-names: 2
-    no-shadow: 2
-    no-undef-init: 2
-    no-undef: 2
-    no-undefined: 2
-    no-unused-vars: 2
-    no-use-before-define: 2

.jshintrc

@@ -1,3 +0,0 @@
-{
-  "esversion": 6
-}

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "webpack --config webpack.production.config.js --progress --profile --colors",
     "start": "webpack-dev-server --progress --profile --colors",
-    "lint": "eslint --ext js --ext jsx src || exit 0"
+    "lint": "eslint --ext js --ext jsx src"
   },
   "repository": {
     "type": "git",
@@ -16,12 +16,40 @@
   "license": "MIT",
   "homepage": "https://github.com/alicoding/react-webpack-babel#readme",
   "dependencies": {
-    "bootstrap": "^4.0.0-alpha.3",
     "node-sass": "^3.9.2",
     "react": "15.3.0",
     "react-dom": "15.3.0",
+    "react-geomicons": "^2.0.5",
+    "react-icons": "^2.2.1",
+    "react-map-gl": "^1.4.2",
+    "react-mapbox-gl": "^0.10.0",
+    "react-tap-event-plugin": "^1.0.0",
+    "rebass": "^0.3.1",
     "sass-loader": "^4.0.1"
   },
+  "jshintConfig": {
+    "esversion": 6
+  },
+  "eslintConfig": {
+    "extend": [
+      "plugin:react/recommended"
+    ],
+    "env": {
+      "browser": true,
+      "node": true,
+      "es6": true
+    },
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
+    "plugins": [
+      "react"
+    ]
+  },
   "devDependencies": {
     "babel-core": "6.14.0",
     "babel-loader": "6.2.4",
@@ -35,11 +63,14 @@
     "extract-text-webpack-plugin": "^1.0.1",
     "file-loader": "0.9.0",
     "html-webpack-plugin": "^2.22.0",
+    "json-loader": "^0.5.4",
     "react-hot-loader": "1.3.0",
     "style-loader": "0.13.1",
+    "transform-loader": "^0.2.3",
     "url-loader": "0.5.7",
     "webpack": "1.13.2",
     "webpack-cleanup-plugin": "^0.3.0",
-    "webpack-dev-server": "1.15.1"
+    "webpack-dev-server": "1.15.1",
+    "webworkify-webpack": "^1.1.7"
   }
 }

src/app.jsx

@@ -1,16 +1,39 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import styles from './index.scss';
+import {Workspace} from './workspace.jsx';
+import {Map} from './map.jsx';
+import {Toolbar} from './toolbar.jsx';
 import React from 'react';
+import styles from './layout.scss';
+import { Drawer, Container, Block, Fixed } from 'rebass'
+import { LayerEditor } from './layers.jsx'
+import theme from './theme.jsx'
 
 export default class App extends React.Component {
+  static childContextTypes = {
+    rebass: React.PropTypes.object,
+		reactIconBase: React.PropTypes.object
+  }
+
+  getChildContext () {
+    return {
+			rebass: theme,
+			reactIconBase: {
+        size: 20,
+      }
+		}
+	}
+
   render() {
     return (
-      <div>
-        <h1>It Works!</h1>
-        <p>This React project just works including <span className={styles.blueBg}>module</span> local styles.</p>
-        <p>Global bootstrap css import works too as you can see on the following button.</p>
-        <p><a className="btn btn-primary btn-lg">Enjoy!</a></p>
+		<div>
+			  <Toolbar />
+			  <Drawer style={{backgroundColor: theme.colors.gray, marginLeft: 60}} open={true} position="left">
+					<LayerEditor />
+        </Drawer>
+				<div className={styles.layoutMap}>
+					<Map />
+				</div>
       </div>
     )
   }
-}
+}

src/button.jsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import styles from './button.scss';
+import { Button, Text } from 'rebass'
+

src/button.scss

@@ -0,0 +1,18 @@
+.button {
+	text-align: center;
+	display: inline-block;
+	margin: 0px;
+	padding: 10px;
+	position: relative;
+	border: none;
+	cursor: pointer;
+	border-radius: 3px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	font-family: 'Open Sans Bold', sans-serif;
+	line-height: 20px;
+	font-size: 12px;
+
+	color: #fff;
+	background-color: rgba(255,255,255,0.10);
+}

src/index.scss

@@ -1,4 +1,8 @@
 .blueBg {
-	background-color: red;
+	background-color: blue;
 	color: white;
 }
+
+.app {
+    padding: 0;
+}

src/layers.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
+import theme from './theme.jsx';
+import { Button, Text } from 'rebass';
+
+export class LayerEditor extends React.Component {
+	render() {
+		return <Container>
+			<Toolbar>
+				<NavItem is="a">
+					Toolbar
+				</NavItem>
+			</Toolbar>
+		</Container>;
+	}
+}

src/layout.scss

@@ -0,0 +1,15 @@
+@mixin full-height {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+	height: 100%;
+}
+
+.layoutMap {
+    @include full-height;
+    width: 100%;
+
+    & > div {
+	    height: 100%;
+    }
+}

src/map.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactMapboxGl from 'react-mapbox-gl';
+import {ZoomControl} from 'react-mapbox-gl';
+
+
+export class Map extends React.Component {
+    constructor(props) {
+			super(props);
+    }
+	render() {
+		return <ReactMapboxGl
+      style="mapbox://styles/morgenkaffee/ciqo4gtwo0037c0m7tpcosu63"
+      accessToken="pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6IjIzcmN0NlkifQ.0LRTNgCc-envt9d5MzR75w"
+		 ><ZoomControl /></ReactMapboxGl>
+	}
+}
+

src/template.html

@@ -6,8 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <div class="container">
-    <div id="app">Loading...</div>
-  </div>
+	<div id="app">Loading...</div>
 </body>
 </html>

src/theme.jsx

@@ -0,0 +1,74 @@
+const caps = {
+  textTransform: 'uppercase',
+  letterSpacing: '.2em'
+}
+
+const dark = {
+  name: 'Dark',
+  color: '#eee',
+  fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
+  backgroundColor: '#111',
+  borderRadius: 5,
+  borderColor: `rgba(255, 255, 255, ${1/16})`,
+
+  colors: {
+		black: '#242424',
+		gray: '#313131',
+		white: '#fff',
+    blue: '#00d9f7',
+    info: '#00d9f7',
+    green: '#0f8',
+    success: '#0f8',
+    orange: '#fb3',
+    warning: '#fb3',
+    primary: '#778',
+    midgray: '#778',
+    gray: '#333339',
+    secondary: '#333339',
+    red: '#f04',
+    error: '#f04'
+  },
+  inverted: '#222',
+
+  scale: [
+    3, 5, 10, 20, 40
+  ],
+
+  Card: {
+    backgroundColor: '#222',
+    border: 0,
+  },
+  Panel: {
+    borderWidth: 2,
+    backgroundColor: '#000'
+  },
+  Heading: caps,
+  Button: {
+    color: '#00d9f7',
+  },
+  ButtonOutline: {
+    color: '#00d9f7',
+  },
+  Toolbar: {
+    minHeight: 64,
+    color: '#00d9f7',
+    backgroundColor: "rgba(0, 0, 0, 0.8)"
+  },
+  Label: { opacity: 5/8 },
+  Menu: {
+    color: '#00d9f7',
+    backgroundColor: '#000'
+  },
+  Message: {
+    color: '#111',
+    opacity: 15/16
+  },
+  Text: {
+    opacity: 7/8
+  },
+  Footer: {
+    opacity: 1/2
+  }
+}
+
+export default dark

src/toolbar.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { Menu, NavItem, Tooltip, Container, Block, Fixed } from 'rebass'
+import theme from './theme.jsx';
+import {MdSettings, MdPalette, MdLayers, MdSave, MdFolderOpen} from 'react-icons/lib/md';
+import { Button, Text } from 'rebass';
+
+export class Toolbar extends React.Component {
+	render() {
+		return <Container style={{
+			zIndex: 100,
+			position: "fixed",
+			height: "100%",
+			left: "0",
+			top: "0",
+			bottom: "0",
+			backgroundColor: theme.colors.black }
+		}>
+			<Block>
+				<Button big={true}>
+					<Tooltip inverted rounded title="Save">
+						<MdSave />
+          </Tooltip>
+				</Button>
+			</Block>
+			<Block>
+				<Button big={true}><MdFolderOpen /></Button>
+			</Block>
+			<Block>
+				<Button big={true}>
+					<Tooltip inverted rounded title="Layers">
+						<MdLayers />
+          </Tooltip>
+				</Button>
+			</Block>
+			<Block>
+				<Button big={true}><MdPalette /></Button>
+			</Block>
+			<Block>
+				<Button big={true}><MdSettings /></Button>
+			</Block>
+		</Container>
+	}
+}

src/workspace.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Space, Toolbar, ButtonCircle, Text, Panel, PanelHeader, PanelFooter } from 'rebass'
+import Icon from 'react-geomicons';
+
+
+export class Workspace extends React.Component {
+	render() {
+		return <div className="workspace">
+<Toolbar>
+ <Text>Hey layer</Text>
+<Space
+    auto
+    x={1}
+  />
+ <ButtonCircle title="Like">
+    <Icon
+      fill="currentColor"
+      height="1em"
+      name="no"
+      width="1em"
+    />
+  </ButtonCircle>
+ <ButtonCircle title="Like">
+    <Icon
+      fill="currentColor"
+      height="1em"
+      name="trash"
+      width="1em"
+    />
+  </ButtonCircle>
+ <ButtonCircle title="Like">
+    <Icon
+      fill="currentColor"
+      height="1em"
+      name="triangleUp"
+      width="1em"
+    />
+  </ButtonCircle>
+ <ButtonCircle title="Like">
+    <Icon
+      fill="currentColor"
+      height="1em"
+      name="heart"
+      width="1em"
+    />
+  </ButtonCircle>
+</Toolbar>
+			</div>
+	}
+}

webpack.config.js

@@ -25,6 +25,18 @@ loaders.push({
 	]
 });
 
+// Mapbox GL
+loaders.push({
+	test: /\.json$/,
+  loader: 'json-loader'
+});
+
+loaders.push({
+	 test: /\.js$/,
+   include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
+   loader: 'transform/cacheable?brfs'
+});
+
 // local css modules
 loaders.push({
 	test: /[\/\\]src[\/\\].*\.css/,
@@ -49,7 +61,12 @@ module.exports = {
 		extensions: ['', '.js', '.jsx']
 	},
 	module: {
-		loaders
+		loaders,
+		postLoaders: [{
+            include: /node_modules\/mapbox-gl-shaders/,
+            loader: 'transform',
+            query: 'brfs'
+        }]
 	},
 	devServer: {
 		contentBase: "./public",