deploy: c168e65d86

I believe this solves most of the missing checkboxes:
- https://github.com/maplibre/maplibre/issues/352

Let me know if there's anything else missing.
Other configuration can be done after the repo has been migrated I
believe.

.babelrc

@@ -1,13 +0,0 @@
-{
-  "presets": ["env", "react"],
-  "plugins": ["transform-object-rest-spread", "transform-class-properties"],
-  "env": {
-    "test": {
-      "plugins": [
-        ["istanbul", {
-          exclude: ["node_modules/**", "test/**"]
-        }]
-      ]
-    }
-  }
-}

.circleci/config.yml

@@ -1,84 +0,0 @@
-version: 2
-templates:
-  # Test the build **only** no webdriver
-  build-steps: &build-steps
-    - checkout
-    - run:
-        name: "Create artifacts directory"
-        command: mkdir /tmp/artifacts
-    - restore_cache:
-        key: v1-dependencies-{{ checksum "package.json" }}
-
-    - run: npm install
-
-    - save_cache:
-        paths:
-          - node_modules
-        key: v1-dependencies-{{ checksum "package.json" }}
-
-    - run: mkdir -p /tmp/artifacts/logs
-    - run: npm run build
-    - run: npm run lint
-    - run: npm run lint-styles
-    - store_artifacts:
-        path: /tmp/artifacts
-        destination: /artifacts
-  # Test in webdriver
-  wdio-steps: &wdio-steps
-    - checkout
-    - run:
-        name: "Create artifacts directory"
-        command: mkdir /tmp/artifacts
-    - restore_cache:
-        key: v1-dependencies-{{ checksum "package.json" }}
-
-    - run: npm install
-
-    - save_cache:
-        paths:
-          - node_modules
-        key: v1-dependencies-{{ checksum "package.json" }}
-
-    - run: mkdir -p /tmp/artifacts/logs
-    - run: npm run build
-    - run: npm run lint
-    - run: npm run lint-styles
-    - run: DOCKER_HOST=localhost npm test
-    - run: ./node_modules/.bin/istanbul report --include /tmp/artifacts/coverage/coverage.json --dir /tmp/artifacts/coverage html lcov
-    - store_artifacts:
-        path: /tmp/artifacts
-        destination: /artifacts
-jobs:
-  build-linux-node-v6:
-    docker:
-      - image: node:6
-    working_directory: ~/repo-linux-node-v6
-    steps: *build-steps
-  build-linux-node-v8:
-    docker:
-      - image: node:8
-      - image: selenium/standalone-chrome:3.8.1
-    working_directory: ~/repo-linux-node-v8
-    steps: *wdio-steps
-  build-linux-node-v9:
-    docker:
-      - image: node:9
-    working_directory: ~/repo-linux-node-v9
-    steps: *build-steps
-  build-osx-node-v9:
-    macos:
-      xcode: "9.0"
-    dependencies:
-      override:
-        - brew install node@9
-    working_directory: ~/repo-linux-node-v9
-    steps: *build-steps
-
-workflows:
-  version: 2
-  build:
-    jobs:
-      - build-linux-node-v6
-      - build-linux-node-v8
-      - build-linux-node-v9
-

.editorconfig

@@ -1,14 +0,0 @@
-root = true
-
-# Unix-style newlines with a newline ending every file
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-# Matches multiple files with brace expansion notation
-# Set default charset
-[*.{js,jsx,html,sass}]
-charset = utf-8
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true

.gitignore

@@ -1,35 +0,0 @@
-# Logs
-logs
-*.log
-*.swp
-*.swo
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
-
-# Ignore build files
-public
-/errorShots
-/old
-/build

.travis.yml

@@ -1,22 +0,0 @@
-language: node_js
-matrix:
-  include:
-    - os: osx
-      node_js: "6"
-    - os: osx
-      node_js: "8"
-    - os: osx
-      node_js: "9"
-install:
-  - npm install
-script:
-  - mkdir public
-  - node --stack_size=100000 $(which npm) run build
-  - npm run lint
-  - npm run lint-styles
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - g++-4.8

Dockerfile

@@ -1,15 +0,0 @@
-FROM nodesource/xenial:6.1.0
-
-EXPOSE 8888
-
-ENV HOME /maputnik
-RUN mkdir ${HOME}
-
-COPY . ${HOME}/
-
-WORKDIR ${HOME}
-
-RUN npm install -d --dev
-RUN npm run build
-
-CMD npm run start -- --host 0.0.0.0

LICENSE

@@ -1,22 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Lukas Martinelli
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

README.md

@@ -1,162 +0,0 @@
-# Maputnik
-
-[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
-[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
-[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
-[![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
-
-[travis]:      https://travis-ci.org/maputnik/editor
-[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
-[dm-prod]:     https://david-dm.org/maputnik/editor
-[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
-[license]:     https://tldrlegal.com/license/mit-license
-
-<img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
-
-A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
-targeted at developers and map designers.
-
-- :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
-- :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
-
-Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.
-
-## Documentation
-
-The documentation can be found in the [Wiki](https://github.com/maputnik/editor/wiki). You are welcome to collaborate!
-
-- :link: **Study the [Maputnik Wiki](https://github.com/maputnik/editor/wiki)**
-- :video_camera: Design a map from Scratch https://youtu.be/XoDh0gEnBQo
-
-[![Design Map from Scratch](https://j.gifs.com/g5XMgl.gif)](https://youtu.be/XoDh0gEnBQo)
-
-## Develop
-
-Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/).
-
-We ensure building and developing Maputnik works with
-
-- Linux, OSX and Windows
-- Node >4
-
-Install the deps, start the dev server and open the web browser on `http://localhost:8888/`.
-
-```bash
-# install dependencies
-npm install
-# start dev server
-npm start
-```
-
-The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
-
-> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
-Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
-
-To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
-
-```
-npm run build
-```
-
-Lint the JavaScript code.
-
-```
-# run linter
-npm run lint
-npm run lint-styles
-```
-
-
-## Tests
-For testing we use [webdriverio](http://webdriver.io) and [selenium-standalone](https://github.com/vvo/selenium-standalone)
-
-[selenium-standalone](https://github.com/vvo/selenium-standalone) starts a server that will launch browsers on your local machine. We use chrome so you **must** have chrome installed on your machine.
-
-Now open and terminal and run the following. This will install the drivers on your local machine
-
-```
-./node_modules/.bin/selenium-standalone install
-```
-
-Now start the standalone server
-
-```
-./node_modules/.bin/selenium-standalone start
-```
-
-Then open another terminal and run
-
-```
-npm test
-```
-
-After some time you should see a browser launch which will be automated by the test runner.
-
-
-## Related Projects
-
-- [maputnik-dev-server](https://github.com/nycplanning/labs-maputnik-dev-server) - An express.js server that allows for quickly loading the style from any mapboxGL map into mapuntnik. 
-
-## Sponsors
-
-Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter.com/projects/174808720/maputnik-visual-map-editor-for-mapbox-gl)**. This project would not be possible without these commercial and individual sponsors.
-
-### Gold
-
-- [Wemap](https://getwemap.com/)
-- [Orbicon Informatik](https://www.orbiconinformatik.dk/)
-- [Terranodo](http://terranodo.io/)
-
-<a href="https://getwemap.com/">
-  <img width="33%" alt="Wemap" style="display:inline" src="media/sponsors/wemap.jpg" />
-</a>
-<a href="http://terranodo.io/">
-  <img width="33%" alt="Terranodo" style="display:inline" src="media/sponsors/terranodo.png" />
-</a>
-<a href="https://www.orbiconinformatik.dk/">
-  <img width="32%" alt="Terranodo" style="display:inline" src="media/sponsors/orbicon_informatik.png" />
-</a>
-
-<br/>
-
-### Silver
-
-- [Klokan Technologies](https://www.klokantech.com/)
-- [Geofabrik](http://www.geofabrik.de/)
-- [Dreipol](https://www.dreipol.ch/)
-
-<a href="https://www.klokantech.com/">
-  <img width="18%" alt="Klokan Technologies" style="display:inline-block" src="media/sponsors/klokantech.png" />
-</a>
-<a href="http://www.geofabrik.de/">
-  <img width="18%" alt="Geofabrik" style="display:inline-block" src="media/sponsors/geofabrik.png" />
-</a>
-<a href="https://www.dreipol.ch/">
-  <img width="18%" alt="Dreipol" style="display:inline-block" src="media/sponsors/dreipol.png" />
-</a>
-
-<br/>
-
-### Individuals
-
-**Influential Stakeholder**
-
-Alan McConchie, Odi, Mats Norén, Uli [geOps](http://geops.ch/), Helge Fahrnberger ([Toursprung](http://www.toursprung.com/)), Kirusanth Poopalasingam
-
-**Stakeholder**
-
-Brian Flood, Vasile Coțovanu, Andreas Kalkbrenner, Christian Mäder, Gregor Wassmann, Lee Armstrong, Rafel, Jon Burgess, Lukas Lehmann, Joachim Ungar, Alois Ackermann, Zsolt Ero, Jordan Meek
-
-**Supporter**
-
-Sina Martinelli, Nicholas Doiron, Neil Cawse, Urs42, Benedikt Groß, Manuel Roth, Janko Mihelić, Moritz Stefaner, Sebastian Ahoi, Juerg Uhlmann, Tom Wider, Nadia Panchaud, Oliver Snowden, Stephan Heuel, Tobin Bradley, Adrian Herzog, Antti Lehto, Pascal Mages, Marc Gehling, Imre Samu, Lauri K., Visahavel Parthasarathy, Christophe Waterlot-Buisine, Max Galka, ubahnverleih, Wouter van Dam, Jakob Lobensteiner, Samuel Kurath, Brian Bancroft
-
-## License
-
-Maputnik is [licensed under MIT](LICENSE) and is Copyright (c) Lukas Martinelli and contributors.
-
-**Disclaimer** This project is not affiliated with Mapbox or Mapbox Studio. It is a independent style editor for the
-open source technology in the Mapbox GL ecosystem.
-As contributor please take extra care of not violating any Mapbox trademarks. Do not get inspired by Mapbox Studio and make your own decisions for a good style editor.

appveyor.yml

@@ -1,17 +0,0 @@
-environment:
-  matrix:
-    - nodejs_version: "6"
-    - nodejs_version: "8"
-    - nodejs_version: "9"
-platform:
-  - x86
-  - x64
-install:
-  - ps: Install-Product node $env:nodejs_version
-  - md public
-  - npm install --global --production windows-build-tools
-  - npm install
-build_script:
-  - npm run build
-test_script:
-  - npm run lint

assets/translation-BhJ-ufwk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-BhJ-ufwk.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-BrzYPxJn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-BrzYPxJn.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-CQD4fuPu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-CQD4fuPu.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-CZ64AJ8H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-CZ64AJ8H.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-XoriI0W-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-XoriI0W-.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

assets/translation-aD1CAGoy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-aD1CAGoy.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

config/wdio.conf.js

@@ -1,62 +0,0 @@
-var webpack          = require("webpack");
-var WebpackDevServer = require("webpack-dev-server");
-var webpackConfig    = require("./webpack.config");
-var testConfig       = require("../test/config/specs");
-var artifacts        = require("../test/artifacts");
-var isDocker         = require("is-docker");
-
-
-var server;
-var SCREENSHOT_PATH = artifacts.pathSync("screenshots");
-
-exports.config = {
-  specs: [
-    './test/functional/index.js'
-  ],
-  exclude: [
-  ],
-  maxInstances: 10,
-  capabilities: [{
-    maxInstances: 5,
-    browserName: 'chrome'
-  }],
-  sync: true,
-  logLevel: 'verbose',
-  coloredLogs: true,
-  bail: 0,
-  screenshotPath: SCREENSHOT_PATH,
-  // Note: This is here because @orangemug currently runs Maputnik inside a docker container.
-  host: process.env.DOCKER_HOST || "0.0.0.0",
-  baseUrl: 'http://localhost',
-  waitforTimeout: 10000,
-  connectionRetryTimeout: 90000,
-  connectionRetryCount: 3,
-  framework: 'mocha',
-  reporters: ['spec'],
-  mochaOpts: {
-    ui: 'bdd',
-    // Because we don't know how long the initial build will take...
-    timeout: 4*60*1000
-  },
-  onPrepare: function (config, capabilities) {
-    return new Promise(function(resolve, reject) {
-      var compiler = webpack(webpackConfig);
-      server = new WebpackDevServer(compiler, {
-        stats: {
-          colors: true
-        }
-      });
-      server.listen(testConfig.port, (isDocker() ? "0.0.0.0" : "localhost"), function(err) {
-        if(err) {
-          reject(err);
-        }
-        else {
-          resolve();
-        }
-      });
-    })
-  },
-  onComplete: function(exitCode) {
-    server.close()
-  }
-}

config/webpack.config.js

@@ -1,70 +0,0 @@
-"use strict";
-var webpack = require('webpack');
-var path = require('path');
-var loaders = require('./webpack.loaders');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-
-const HOST = process.env.HOST || "127.0.0.1";
-const PORT = process.env.PORT || "8888";
-
-module.exports = {
-  target: 'web',
-  entry: [
-    `webpack-dev-server/client?http://${HOST}:${PORT}`,
-    `webpack/hot/only-dev-server`,
-    `./src/index.jsx` // Your appʼs entry point
-  ],
-  devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map',
-  output: {
-    path: path.join(__dirname, '..', 'public'),
-    filename: 'bundle.js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  module: {
-    noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/
-    ],
-    loaders: loaders
-  },
-  node: {
-    fs: "empty",
-    net: 'empty',
-    tls: 'empty'
-  },
-  devServer: {
-    contentBase: "./public",
-    // do not print bundle build stats
-    noInfo: true,
-    // enable HMR
-    hot: true,
-    // embed the webpack-dev-server runtime into the bundle
-    inline: true,
-    // serve index.html in place of 404 responses to allow HTML5 history
-    historyApiFallback: true,
-    port: PORT,
-    host: HOST,
-    watchOptions: {
-      // Disabled polling by default as it causes lots of CPU usage and hence drains laptop batteries. To enable polling add WEBPACK_DEV_SERVER_POLLING to your environment
-      // See <https://webpack.js.org/configuration/watch/#watchoptions-poll> for details
-      poll: (!!process.env.WEBPACK_DEV_SERVER_POLLING ? true : false),
-      watch: false
-    }
-  },
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.HotModuleReplacementPlugin(),
-    new HtmlWebpackPlugin({
-      title: 'Maputnik',
-      template: './src/template.html'
-    }),
-    new CopyWebpackPlugin([
-      {
-        from: './src/manifest.json',
-        to: 'manifest.json'
-      }
-    ])
-  ]
-};

config/webpack.loaders.js

@@ -1,55 +0,0 @@
-module.exports = [
-  {
-    test: /\.jsx?$/,
-    exclude: /(node_modules|bower_components|public)/,
-    loaders: ['react-hot-loader/webpack']
-  },
-  // HACK: This is a massive hack and reaches into the mapbox-gl private API.
-  // We have to include this for access to `normalizeSourceURL`. We should
-  // remove this ASAP, see <https://github.com/mapbox/mapbox-gl-js/issues/2416>
-  {
-    test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react', 'flow'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
-    }
-  },
-  {
-    test: /\.jsx?$/,
-    // Note: These modules aren't ES5 therefore we much compile them.
-    exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/,
-    loader: 'babel-loader',
-    query: {
-      presets: ['env', 'react'],
-      plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'],
-    }
-  },
-  {
-    test: /\.(eot|ttf|woff|woff2)$/,
-    loader: 'file-loader?name=fonts/[name].[ext]'
-  },
-  {
-    test: /\.ico$/,
-    loader: 'file-loader?name=[name].[ext]'
-  },
-  {
-    test: /\.(svg|gif|jpg|png)$/,
-    loader: 'file-loader?name=img/[name].[ext]'
-  },
-  {
-    test: /\.json$/,
-    loader: 'json-loader'
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
-    loaders: ["style-loader", "css-loader", "sass-loader"]
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
-    loaders: [
-      'style-loader?sourceMap',
-      'css-loader'
-    ]
-  }
-];

config/webpack.production.config.js

@@ -1,88 +0,0 @@
-var webpack = require('webpack');
-var path = require('path');
-var loaders = require('./webpack.loaders');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
-var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-var CopyWebpackPlugin = require('copy-webpack-plugin');
-var artifacts = require("../test/artifacts");
-var UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
-var OUTPATH = artifacts.pathSync("/build");
-
-module.exports = {
-  entry: {
-    app: './src/index.jsx',
-    vendor: [
-        'file-saver',
-        'mapbox-gl/dist/mapbox-gl.js',
-        "lodash.clonedeep",
-        "lodash.throttle",
-        'color',
-        'react',
-        "react-dom",
-        "react-color",
-        "react-file-reader-input",
-        "react-collapse",
-        "react-height",
-        "react-icon-base",
-        "react-motion",
-        "react-sortable-hoc",
-        "request",
-        //TODO: Icons raise multi vendor errors?
-        //"react-icons",
-    ]
-  },
-  output: {
-    path: OUTPATH,
-    filename: '[name].[chunkhash].js',
-    chunkFilename: '[chunkhash].js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  module: {
-    noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/
-    ],
-    loaders
-  },
-  node: {
-    fs: "empty",
-    net: 'empty',
-    tls: 'empty'
-  },
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[chunkhash].vendor.js' }),
-    new WebpackCleanupPlugin(),
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new UglifyJsPlugin(),
-    new ExtractTextPlugin('[contenthash].css', {
-      allChunks: true
-    }),
-    new HtmlWebpackPlugin({
-      template: './src/template.html',
-      title: 'Maputnik'
-    }),
-    new CopyWebpackPlugin([
-      {
-        from: './src/manifest.json',
-        to: 'manifest.json'
-      }
-    ]),
-    new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      defaultSizes: 'gzip',
-      openAnalyzer: false,
-      generateStatsFile: true,
-      reportFilename: 'bundle-stats.html',
-      statsFilename: 'bundle-stats.json',
-    })
-  ]
-};

index.html

@@ -0,0 +1,133 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Maputnik</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="manifest" href="/maputnik/assets/manifest-BrZzkYP9.json">
+  <link rel="icon" href="/maputnik/assets/favicon-DBn6BKLx.ico" type="image/x-icon" />
+  <style>
+    html {
+      background-color: rgb(28, 31, 36);
+    }
+
+    .loading {
+      text-align: center;
+      position: absolute;
+      width: 100vw;
+      height: 100vh;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loading__logo img {
+      width: 200px;
+      height: 200px;
+    }
+
+    .loading__text {
+      font-family: sans-serif;
+      color: white;
+      font-size: 1.2em;
+      padding-bottom: 2em;
+    }
+
+  </style>
+  <script type="module" crossorigin src="/maputnik/assets/index-DtxAbt8L.js"></script>
+  <link rel="stylesheet" crossorigin href="/maputnik/assets/index-CuVViU0P.css">
+</head>
+<body>
+  <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1">
+    <defs>
+      <filter id="protanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.567, 0.433, 0,     0, 0
+                  0.558, 0.442, 0,     0, 0
+                  0,     0.242, 0.758, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="protanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.817, 0.183, 0,     0, 0
+                  0.333, 0.667, 0,     0, 0
+                  0,     0.125, 0.875, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.625, 0.375, 0,   0, 0
+                  0.7,   0.3,   0,   0, 0
+                  0,     0.3,   0.7, 0, 0
+                  0,     0,     0,   1, 0"/>
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.8,   0.2,   0,     0, 0
+                  0.258, 0.742, 0,     0, 0
+                  0,     0.142, 0.858, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.95, 0.05,  0,     0, 0
+                  0,    0.433, 0.567, 0, 0
+                  0,    0.475, 0.525, 0, 0
+                  0,    0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.967, 0.033, 0,     0, 0
+                  0,     0.733, 0.267, 0, 0
+                  0,     0.183, 0.817, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.618, 0.320, 0.062, 0, 0
+                  0.163, 0.775, 0.062, 0, 0
+                  0.163, 0.320, 0.516, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+    </defs>
+  </svg>
+
+  <div id="app"></div>
+  <div class="loading">
+    <div class="loading__logo">
+      <img inline src="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='1200'%20height='1200'%20viewBox='0%200%20100%20100'%3e%3cstyle%3e@keyframes%20circle-anim{0%25,40%25{fill-opacity:0}60%25,to{fill-opacity:1}}.circle0,.circle1,.circle2,.circle3,.circle4,.circle5{stroke-opacity:0;animation-name:circle-anim;will-change:transform;animation-timing-function:east-in-out;animation-duration:800ms;animation-iteration-count:infinite;animation-direction:alternate}.circle0{animation-delay:100ms}.circle1{animation-delay:200ms}.circle2{animation-delay:300ms}.circle3{animation-delay:400ms}.circle4{animation-delay:500ms}.circle5{animation-delay:600ms}%3c/style%3e%3cg%20class='map'%20stroke='%23000'%3e%3cuse%20xlink:href='%23ref-1--map__main'%20fill='%234eba6f'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--map__line1'%20fill='none'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--map__line2'%20fill='none'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--map__line3'%20fill='none'%3e%3c/use%3e%3c/g%3e%3cg%20class='palette'%3e%3cuse%20xlink:href='%23ref-1--palette__main'%20fill='%23fff'%20stroke='%23000'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--palette__inner'%20fill='none'%20stroke='%23000'%3e%3c/use%3e%3cuse%20class='circle5'%20xlink:href='%23ref-1--palette__circle5'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20class='circle4'%20xlink:href='%23ref-1--palette__circle4'%20fill='%234eba6f'%3e%3c/use%3e%3cuse%20class='circle3'%20xlink:href='%23ref-1--palette__circle3'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20class='circle2'%20xlink:href='%23ref-1--palette__circle2'%20fill='%234eba6f'%3e%3c/use%3e%3cuse%20class='circle1'%20xlink:href='%23ref-1--palette__circle1'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20class='circle0'%20xlink:href='%23ref-1--palette__circle0'%20fill='%234eba6f'%3e%3c/use%3e%3c/g%3e%3cg%20class='brush'%20stroke='%23000'%3e%3cuse%20xlink:href='%23ref-1--brush__bottom'%20fill='%23f7c44c'%3e%3c/use%3e%3cuse%20xlink:href='%23ref-1--brush__top'%20fill='%23fff'%3e%3c/use%3e%3c/g%3e%3cdefs%3e%3cpath%20id='ref-1--map__main'%20stroke-width='2.366'%20stroke-linejoin='round'%20d='M18.84%207.717l15.44%207.542%2015.75-7.762%2015.7%207.857L81.005%207.67%2096.31%2054.052%2073.598%2062.12%2050.93%2053.872l-25.1%208.066-22.668-8.066z'%3e%3c/path%3e%3cpath%20id='ref-1--map__line1'%20d='M65.556%2015.07l7.647%2046.838'%20stroke-width='1.104'%3e%3c/path%3e%3cpath%20id='ref-1--map__line2'%20d='M50.261%207.422l.717%2046.6'%20stroke-width='1.104'%3e%3c/path%3e%3cpath%20id='ref-1--map__line3'%20d='M34.011%2015.07l-8.603%2046.6'%20stroke-width='1.104'%3e%3c/path%3e%3cpath%20id='ref-1--palette__main'%20stroke-width='2.3'%20d='M47.352%2030.887c7.993.226%2016.934%209.725%2017.954%2015.25%201.02%205.527-.743%2011.125-4.298%2013.875-3.554%202.75-8.6%202.905-8.723%208.302-.097%204.237%208.457%208.5%208.088%2015.653-.406%207.857-15.508%2013.15-30.943%206.102-8.556-3.906-14.249-13.653-13.385-26.238C16.833%2052.334%2022.32%2043.658%2027.382%2039c5.977-5.503%2011.977-8.337%2019.97-8.112z'%3e%3c/path%3e%3ccircle%20id='ref-1--palette__inner'%20stroke-width='2.3'%20cx='41.873'%20cy='61.901'%20r='6.389'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle5'%20cy='44.56'%20cx='54.347'%20r='4.336'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle4'%20cx='40.443'%20cy='41.555'%20r='4.336'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle3'%20r='4.336'%20cy='51.102'%20cx='29.651'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle2'%20cx='25.293'%20cy='65.836'%20r='4.336'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle1'%20r='4.336'%20cy='79.326'%20cx='32.764'%3e%3c/circle%3e%3ccircle%20id='ref-1--palette__circle0'%20cx='46.669'%20cy='80.571'%20r='4.336'%3e%3c/circle%3e%3cpath%20id='ref-1--brush__bottom'%20d='M76.333%2089.333c-1.645-9.794-4.375-35.26-4.32-37.887.056-2.627%202.52-4.34%205.36-4.317%202.842.022%205.098%201.87%205.314%204.27.107%201.2-1.576%2028.06-2.318%2037.844-.332%204.374-3.31%204.413-4.036.09z'%20stroke-width='2.3'%20stroke-linejoin='round'%3e%3c/path%3e%3cpath%20id='ref-1--brush__top'%20stroke-linejoin='round'%20stroke-width='2.3'%20d='M77.184%2026.428s-5.621%207.02-5.621%2011.978c0%204.957%202.206%206.878%205.81%206.878%203.606%200%205.148-1.708%205.29-6.736.142-5.028-5.479-12.12-5.479-12.12z'%3e%3c/path%3e%3c/defs%3e%3c/svg%3e" />
+    </div>
+    <div class="loading__text">Loading&hellip;</div>
+  </div>
+</body>
+</html>

package.json

@@ -1,148 +0,0 @@
-{
-  "name": "maputnik",
-  "version": "1.2.0-beta",
-  "description": "A MapboxGL visual style editor",
-  "main": "''",
-  "scripts": {
-    "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
-    "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
-    "test": "cross-env NODE_ENV=test wdio config/wdio.conf.js",
-    "test-watch": "cross-env NODE_ENV=test wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
-    "lint": "eslint --ext js --ext jsx {src,test}",
-    "lint-styles": "stylelint 'src/styles/*.scss'",
-    "nsp": "nsp check --reporter summary"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/maputnik/editor"
-  },
-  "author": "Lukas Martinelli",
-  "license": "MIT",
-  "homepage": "https://github.com/maputnik/editor#readme",
-  "dependencies": {
-    "@mapbox/mapbox-gl-rtl-text": "^0.1.1",
-    "@mapbox/mapbox-gl-style-spec": "^11.1.1",
-    "classnames": "^2.2.5",
-    "codemirror": "^5.36.0",
-    "color": "^3.0.0",
-    "file-saver": "^1.3.8",
-    "github-api": "^3.0.0",
-    "jsonlint": "github:josdejong/jsonlint#85a19d7",
-    "lodash.capitalize": "^4.2.1",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.isequal": "^4.5.0",
-    "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.44.2",
-    "mapbox-gl-inspect": "^1.3.1",
-    "maputnik-design": "github:maputnik/design",
-    "mousetrap": "^1.6.1",
-    "ol-mapbox-style": "^2.10.1",
-    "ol": "^4.6.5",
-    "prop-types": "^15.6.0",
-    "react": "^16.3.2",
-    "react-addons-pure-render-mixin": "^15.6.2",
-    "react-autocomplete": "^1.7.2",
-    "react-codemirror2": "^4.2.1",
-    "react-collapse": "^4.0.3",
-    "react-color": "^2.14.1",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.3.2",
-    "react-file-reader-input": "^1.1.4",
-    "react-height": "^3.0.0",
-    "react-icon-base": "^2.1.1",
-    "react-icons": "^2.2.7",
-    "react-motion": "^0.5.2",
-    "react-sortable-hoc": "^0.6.8",
-    "reconnecting-websocket": "^3.2.2",
-    "request": "^2.85.0",
-    "url": "^0.11.0"
-  },
-  "jshintConfig": {
-    "esversion": 6
-  },
-  "stylelint": {
-    "extends": "stylelint-config-recommended-scss",
-    "rules": {
-      "no-descending-specificity": null
-    }
-  },
-  "eslintConfig": {
-    "plugins": [
-      "react"
-    ],
-    "extends": [
-      "plugin:react/recommended"
-    ],
-    "env": {
-      "browser": true,
-      "node": true,
-      "es6": true
-    },
-    "parser": "babel-eslint",
-    "parserOptions": {
-      "ecmaVersion": 6,
-      "sourceType": "module",
-      "ecmaFeatures": {
-        "impliedStrict": true,
-        "experimentalObjectRestSpread": true,
-        "jsx": true
-      }
-    }
-  },
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.2.3",
-    "babel-loader": "7.1.4",
-    "babel-plugin-istanbul": "^4.1.6",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
-    "babel-runtime": "^6.26.0",
-    "base64-loader": "^1.0.0",
-    "copy-webpack-plugin": "^4.5.1",
-    "cors": "^2.8.4",
-    "cross-env": "^5.1.4",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
-    "eslint-plugin-react": "^7.4.0",
-    "express": "^4.16.3",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.5",
-    "html-webpack-plugin": "^3.2.0",
-    "is-docker": "^1.1.0",
-    "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^1.2.0",
-    "json-loader": "^0.5.7",
-    "mkdirp": "^0.5.1",
-    "mocha": "^5.1.0",
-    "node-sass": "^4.8.3",
-    "nsp": "^3.1.0",
-    "react-hot-loader": "^3.1.1",
-    "sass-loader": "^7.0.1",
-    "selenium-standalone": "^6.14.0",
-    "style-loader": "^0.20.3",
-    "stylelint": "^9.2.0",
-    "stylelint-config-recommended-scss": "^3.2.0",
-    "stylelint-scss": "^3.0.0",
-    "transform-loader": "^0.2.4",
-    "uglifyjs-webpack-plugin": "^1.2.4",
-    "uuid": "^3.1.0",
-    "wdio-mocha-framework": "^0.5.13",
-    "wdio-phantomjs-service": "^0.2.2",
-    "wdio-selenium-standalone-service": "0.0.10",
-    "wdio-spec-reporter": "^0.1.2",
-    "webdriverio": "^4.12.0",
-    "webpack": "^3.8.1",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-dev-server": "^2.9.4"
-  }
-}

src/codemirror-maputnik.css

@@ -1,51 +0,0 @@
-.cm-s-maputnik.CodeMirror {
-  height: 100%;
-  font-size: 12px;
-}
-
-.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
-  color: #8e8e8e;
-  border: none;
-}
-
-.cm-s-maputnik.CodeMirror {
-  background: transparent;
-}
-
-.cm-s-maputnik .CodeMirror-gutters {
-  background: #212328;
-}
-
-.cm-s-maputnik .CodeMirror-cursor {
-    border-left: solid thin #8e8e8e !important;
-}
-
-.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::selection,
-.cm-s-maputnik .CodeMirror-line > span::selection,
-.cm-s-maputnik .CodeMirror-line > span > span::selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
-  color: #8f9d6a;
-}
-.cm-s-maputnik span.cm-number { color: #91675f; }
-.cm-s-maputnik span.cm-property { color: #b8a077; }
-
-.cm-s-maputnik .CodeMirror-activeline-background {
-  background: rgba(255,255,255,0.1);
-}
-
-.cm-s-maputnik .CodeMirror-matchingbracket {
-  text-decoration: underline; color: white !important;
-}

src/components/App.jsx

@@ -1,329 +0,0 @@
-import React from 'react'
-import Mousetrap from 'mousetrap'
-
-import MapboxGlMap from './map/MapboxGlMap'
-import OpenLayers3Map from './map/OpenLayers3Map'
-import LayerList from './layers/LayerList'
-import LayerEditor from './layers/LayerEditor'
-import Toolbar from './Toolbar'
-import AppLayout from './AppLayout'
-import MessagePanel from './MessagePanel'
-
-import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import style from '../libs/style.js'
-import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
-import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { loadDefaultStyle, StyleStore } from '../libs/stylestore'
-import { ApiStyleStore } from '../libs/apistore'
-import { RevisionStore } from '../libs/revisions'
-import LayerWatcher from '../libs/layerwatcher'
-import tokens from '../config/tokens.json'
-import isEqual from 'lodash.isequal'
-import Debug from '../libs/debug'
-
-import MapboxGl from 'mapbox-gl'
-import mapboxUtil from 'mapbox-gl/src/util/mapbox'
-
-
-function updateRootSpec(spec, fieldName, newValues) {
-  return {
-    ...spec,
-    $root: {
-      ...spec.$root,
-      [fieldName]: {
-        ...spec.$root[fieldName],
-        values: newValues
-      }
-    }
-  }
-}
-
-export default class App extends React.Component {
-  constructor(props) {
-    super(props)
-    this.revisionStore = new RevisionStore()
-    this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, false)
-    })
-
-    const styleUrl = initialStyleUrl()
-    if(styleUrl) {
-      this.styleStore = new StyleStore()
-      loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
-    } else {
-      this.styleStore.init(err => {
-        if(err) {
-          console.log('Falling back to local storage for storing styles')
-          this.styleStore = new StyleStore()
-        }
-        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
-
-        if(Debug.enabled()) {
-          Debug.set("maputnik", "styleStore", this.styleStore);
-          Debug.set("maputnik", "revisionStore", this.revisionStore);
-        }
-      })
-    }
-
-    if(Debug.enabled()) {
-      Debug.set("maputnik", "revisionStore", this.revisionStore);
-      Debug.set("maputnik", "styleStore", this.styleStore);
-    }
-
-    this.state = {
-      errors: [],
-      infos: [],
-      mapStyle: style.emptyStyle,
-      selectedLayerIndex: 0,
-      sources: {},
-      vectorLayers: {},
-      inspectModeEnabled: false,
-      spec: styleSpec.latest,
-    }
-
-    this.layerWatcher = new LayerWatcher({
-      onVectorLayersChange: v => this.setState({ vectorLayers: v })
-    })
-  }
-
-  componentDidMount() {
-    Mousetrap.bind(['mod+z'], this.onUndo.bind(this));
-    Mousetrap.bind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
-  }
-
-  componentWillUnmount() {
-    Mousetrap.unbind(['mod+z'], this.onUndo.bind(this));
-    Mousetrap.unbind(['mod+y', 'mod+shift+z'], this.onRedo.bind(this));
-  }
-
-  saveStyle(snapshotStyle) {
-    this.styleStore.save(snapshotStyle)
-  }
-
-  updateFonts(urlTemplate) {
-    const metadata = this.state.mapStyle.metadata || {}
-    const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
-
-    let glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
-    downloadGlyphsMetadata(glyphUrl, fonts => {
-      this.setState({ spec: updateRootSpec(this.state.spec, 'glyphs', fonts)})
-    })
-  }
-
-  updateIcons(baseUrl) {
-    downloadSpriteMetadata(baseUrl, icons => {
-      this.setState({ spec: updateRootSpec(this.state.spec, 'sprite', icons)})
-    })
-  }
-
-  onStyleChanged(newStyle, save=true) {
-
-    const errors = styleSpec.validate(newStyle, styleSpec.latest)
-    if(errors.length === 0) {
-
-      if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
-        this.updateFonts(newStyle.glyphs)
-      }
-      if(newStyle.sprite !== this.state.mapStyle.sprite) {
-        this.updateIcons(newStyle.sprite)
-      }
-
-      this.revisionStore.addRevision(newStyle)
-      if(save) this.saveStyle(newStyle)
-      this.setState({
-        mapStyle: newStyle,
-        errors: [],
-      })
-    } else {
-      this.setState({
-        errors: errors.map(err => err.message)
-      })
-    }
-
-    this.fetchSources();
-  }
-
-  onUndo() {
-    const activeStyle = this.revisionStore.undo()
-    const messages = undoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
-    this.setState({
-      mapStyle: activeStyle,
-      infos: messages,
-    })
-  }
-
-  onRedo() {
-    const activeStyle = this.revisionStore.redo()
-    const messages = redoMessages(this.state.mapStyle, activeStyle)
-    this.saveStyle(activeStyle)
-    this.setState({
-      mapStyle: activeStyle,
-      infos: messages,
-    })
-  }
-
-  onLayersChange(changedLayers) {
-    const changedStyle = {
-      ...this.state.mapStyle,
-      layers: changedLayers
-    }
-    this.onStyleChanged(changedStyle)
-  }
-
-  onLayerIdChange(oldId, newId) {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, oldId)
-
-    changedLayers[idx] = {
-      ...changedLayers[idx],
-      id: newId
-    }
-
-    this.onLayersChange(changedLayers)
-  }
-
-  onLayerChanged(layer) {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layer.id)
-    changedLayers[idx] = layer
-
-    this.onLayersChange(changedLayers)
-  }
-
-  changeInspectMode() {
-    this.setState({
-      inspectModeEnabled: !this.state.inspectModeEnabled
-    })
-  }
-
-  fetchSources() {
-    const sourceList = {...this.state.sources};
-
-    for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
-      if(sourceList.hasOwnProperty(key)) {
-        continue;
-      }
-
-      sourceList[key] = {
-        type: val.type,
-        layers: []
-      };
-
-      if(!this.state.sources.hasOwnProperty(key) && val.type === "vector" && val.hasOwnProperty("url")) {
-        let url = val.url;
-        try {
-          url = mapboxUtil.normalizeSourceURL(url, MapboxGl.accessToken);
-        } catch(err) {
-          console.warn("Failed to normalizeSourceURL: ", err);
-        }
-
-        fetch(url)
-          .then((response) => {
-            return response.json();
-          })
-          .then((json) => {
-            if(!json.hasOwnProperty("vector_layers")) {
-              return;
-            }
-
-            // Create new objects before setState
-            const sources = Object.assign({}, this.state.sources);
-
-            for(let layer of json.vector_layers) {
-              sources[key].layers.push(layer.id)
-            }
-
-            console.debug("Updating source: "+key);
-            this.setState({
-              sources: sources
-            });
-          })
-          .catch((err) => {
-            console.error("Failed to process sources for '%s'", url, err);
-          })
-      }
-    }
-
-    if(!isEqual(this.state.sources, sourceList)) {
-      console.debug("Setting sources");
-      this.setState({
-        sources: sourceList
-      })
-    }
-  }
-
-  mapRenderer() {
-    const mapProps = {
-      mapStyle: style.replaceAccessToken(this.state.mapStyle, {allowFallback: true}),
-      onDataChange: (e) => {
-        this.layerWatcher.analyzeMap(e.map)
-        this.fetchSources();
-      },
-    }
-
-    const metadata = this.state.mapStyle.metadata || {}
-    const renderer = metadata['maputnik:renderer'] || 'mbgljs'
-
-    // Check if OL3 code has been loaded?
-    if(renderer === 'ol3') {
-      return <OpenLayers3Map {...mapProps} />
-    } else {
-      return  <MapboxGlMap {...mapProps}
-        inspectModeEnabled={this.state.inspectModeEnabled}
-        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
-        onLayerSelect={this.onLayerSelect.bind(this)} />
-    }
-  }
-
-  onLayerSelect(layerId) {
-    const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
-    this.setState({ selectedLayerIndex: idx })
-  }
-
-  render() {
-    const layers = this.state.mapStyle.layers || []
-    const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
-    const metadata = this.state.mapStyle.metadata || {}
-
-    const toolbar = <Toolbar
-      mapStyle={this.state.mapStyle}
-      inspectModeEnabled={this.state.inspectModeEnabled}
-      sources={this.state.sources}
-      onStyleChanged={this.onStyleChanged.bind(this)}
-      onStyleOpen={this.onStyleChanged.bind(this)}
-      onInspectModeToggle={this.changeInspectMode.bind(this)}
-    />
-
-    const layerList = <LayerList
-      onLayersChange={this.onLayersChange.bind(this)}
-      onLayerSelect={this.onLayerSelect.bind(this)}
-      selectedLayerIndex={this.state.selectedLayerIndex}
-      layers={layers}
-      sources={this.state.sources}
-    />
-
-    const layerEditor = selectedLayer ? <LayerEditor
-      layer={selectedLayer}
-      sources={this.state.sources}
-      vectorLayers={this.state.vectorLayers}
-      spec={this.state.spec}
-      onLayerChanged={this.onLayerChanged.bind(this)}
-      onLayerIdChange={this.onLayerIdChange.bind(this)}
-    /> : null
-
-    const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
-      errors={this.state.errors}
-      infos={this.state.infos}
-    /> : null
-
-    return <AppLayout
-      toolbar={toolbar}
-      layerList={layerList}
-      layerEditor={layerEditor}
-      map={this.mapRenderer()}
-      bottom={bottomPanel}
-    />
-  }
-}

src/components/AppLayout.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ScrollContainer from './ScrollContainer'
-
-class AppLayout extends React.Component {
-  static propTypes = {
-    toolbar: PropTypes.element.isRequired,
-    layerList: PropTypes.element.isRequired,
-    layerEditor: PropTypes.element,
-    map: PropTypes.element.isRequired,
-    bottom: PropTypes.element,
-  }
-
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
-  render() {
-    return <div className="maputnik-layout">
-      {this.props.toolbar}
-      <div className="maputnik-layout-list">
-        <ScrollContainer>
-          {this.props.layerList}
-        </ScrollContainer>
-      </div>
-      <div className="maputnik-layout-drawer">
-        <ScrollContainer>
-          {this.props.layerEditor}
-        </ScrollContainer>
-      </div>
-      {this.props.map}
-      {this.props.bottom && <div className="maputnik-layout-bottom">
-          {this.props.bottom}
-        </div>
-      }
-    </div>
-  }
-}
-
-export default AppLayout

src/components/Button.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-class Button extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    onClick: PropTypes.func,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node
-  }
-
-  render() {
-    return <a
-      onClick={this.props.onClick}
-      className={classnames("maputnik-button", this.props.className)}
-      data-wd-key={this.props["data-wd-key"]}
-      style={this.props.style}>
-      {this.props.children}
-    </a>
-  }
-}
-
-export default Button

src/components/MessagePanel.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class MessagePanel extends React.Component {
-  static propTypes = {
-    errors: PropTypes.array,
-    infos: PropTypes.array,
-  }
-
-  render() {
-    const errors = this.props.errors.map((m, i) => {
-      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
-    })
-
-    const infos = this.props.infos.map((m, i) => {
-      return <p key={"info-"+i}>{m}</p>
-    })
-
-    return <div className="maputnik-message-panel">
-      {errors}
-      {infos}
-    </div>
-  }
-}
-
-
-export default MessagePanel

src/components/ScrollContainer.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class ScrollContainer extends React.Component {
-  static propTypes = {
-    children: PropTypes.node
-  }
-
-  render() {
-    return <div className="maputnik-scroll-container">
-      {this.props.children}
-    </div>
-  }
-}
-
-export default ScrollContainer

src/components/Toolbar.jsx

@@ -1,178 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import FileReaderInput from 'react-file-reader-input'
-import classnames from 'classnames'
-
-import MdFileDownload from 'react-icons/lib/md/file-download'
-import MdFileUpload from 'react-icons/lib/md/file-upload'
-import OpenIcon from 'react-icons/lib/md/open-in-browser'
-import SettingsIcon from 'react-icons/lib/md/settings'
-import MdInfo from 'react-icons/lib/md/info'
-import SourcesIcon from 'react-icons/lib/md/layers'
-import MdSave from 'react-icons/lib/md/save'
-import MdStyle from 'react-icons/lib/md/style'
-import MdMap from 'react-icons/lib/md/map'
-import MdInsertEmoticon from 'react-icons/lib/md/insert-emoticon'
-import MdFontDownload from 'react-icons/lib/md/font-download'
-import HelpIcon from 'react-icons/lib/md/help-outline'
-import InspectionIcon from 'react-icons/lib/md/find-in-page'
-
-import logoImage from 'maputnik-design/logos/logo-color.svg'
-import SettingsModal from './modals/SettingsModal'
-import ExportModal from './modals/ExportModal'
-import SourcesModal from './modals/SourcesModal'
-import OpenModal from './modals/OpenModal'
-import pkgJson from '../../package.json'
-
-import style from '../libs/style'
-
-class IconText extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-  }
-
-  render() {
-    return <span className="maputnik-icon-text">{this.props.children}</span>
-  }
-}
-
-class ToolbarLink extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-    href: PropTypes.string,
-  }
-
-  render() {
-    return <a
-      className={classnames('maputnik-toolbar-link', this.props.className)}
-      href={this.props.href}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      {this.props.children}
-    </a>
-  }
-}
-
-class ToolbarAction extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-    onClick: PropTypes.func,
-    wdKey: PropTypes.string
-  }
-
-  render() {
-    return <a
-      className='maputnik-toolbar-action'
-      data-wd-key={this.props.wdKey}
-      onClick={this.props.onClick}
-    >
-      {this.props.children}
-    </a>
-  }
-}
-
-export default class Toolbar extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    inspectModeEnabled: PropTypes.bool.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-    // A new style has been uploaded
-    onStyleOpen: PropTypes.func.isRequired,
-    // A dict of source id's and the available source layers
-    sources: PropTypes.object.isRequired,
-    onInspectModeToggle: PropTypes.func.isRequired,
-    children: PropTypes.node
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      isOpen: {
-        settings: false,
-        sources: false,
-        open: false,
-        add: false,
-        export: false,
-      }
-    }
-  }
-
-  toggleModal(modalName) {
-    this.setState({
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
-      }
-    })
-  }
-
-  render() {
-    return <div className='maputnik-toolbar'>
-      <SettingsModal
-        mapStyle={this.props.mapStyle}
-        onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, 'settings')}
-      />
-      <ExportModal
-        mapStyle={this.props.mapStyle}
-        onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.isOpen.export}
-        onOpenToggle={this.toggleModal.bind(this, 'export')}
-      />
-      <OpenModal
-        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.props.onStyleOpen}
-        onOpenToggle={this.toggleModal.bind(this, 'open')}
-      />
-      <SourcesModal
-          mapStyle={this.props.mapStyle}
-          onStyleChanged={this.props.onStyleChanged}
-          isOpen={this.state.isOpen.sources}
-          onOpenToggle={this.toggleModal.bind(this, 'sources')}
-      />
-      <div className="maputnik-toolbar__inner">
-        <ToolbarLink
-          href={"https://github.com/maputnik/editor"}
-          className="maputnik-toolbar-logo"
-        >
-          <img src={logoImage} alt="Maputnik" />
-          <h1>Maputnik
-            <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
-          </h1>
-        </ToolbarLink>
-        <div className="maputnik-toolbar__actions">
-          <ToolbarAction wdKey="nav:open" onClick={this.toggleModal.bind(this, 'open')}>
-            <OpenIcon />
-            <IconText>Open</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:export" onClick={this.toggleModal.bind(this, 'export')}>
-            <MdFileDownload />
-            <IconText>Export</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:sources" onClick={this.toggleModal.bind(this, 'sources')}>
-            <SourcesIcon />
-            <IconText>Sources</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:settings" onClick={this.toggleModal.bind(this, 'settings')}>
-            <SettingsIcon />
-            <IconText>Style Settings</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:inspect" onClick={this.props.onInspectModeToggle}>
-            <InspectionIcon />
-            <IconText>
-              { this.props.inspectModeEnabled && <span>Map Mode</span> }
-              { !this.props.inspectModeEnabled && <span>Inspect Mode</span> }
-            </IconText>
-          </ToolbarAction>
-          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-            <HelpIcon />
-            <IconText>Help</IconText>
-          </ToolbarLink>
-        </div>
-      </div>
-    </div>
-  }
-}

src/components/fields/ColorField.jsx

@@ -1,121 +0,0 @@
-import React from 'react'
-import Color from 'color'
-import ChromePicker from 'react-color/lib/components/chrome/Chrome'
-import PropTypes from 'prop-types'
-
-function formatColor(color) {
-  const rgb = color.rgb
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
-}
-
-/*** Number fields with support for min, max and units and documentation*/
-class ColorField extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string,
-    doc: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      pickerOpened: false,
-    }
-  }
-
-  //TODO: I much rather would do this with absolute positioning
-  //but I am too stupid to get it to work together with fixed position
-  //and scrollbars so I have to fallback to JavaScript
-  calcPickerOffset() {
-    const elem = this.colorInput
-    if(elem) {
-      const pos = elem.getBoundingClientRect()
-      return {
-        top: pos.top,
-        left: pos.left + 196,
-      }
-    } else {
-      return {
-        top: 160,
-        left: 555,
-      }
-    }
-  }
-
-  togglePicker() {
-    this.setState({ pickerOpened: !this.state.pickerOpened })
-  }
-
-  get color() {
-    // Catch invalid color.
-    try {
-      return Color(this.props.value).rgb()
-    }
-    catch(err) {
-      console.warn("Error parsing color: ", err);
-      return Color("rgb(255,255,255)");
-    }
-  }
-
-  render() {
-    const offset = this.calcPickerOffset()
-    var currentColor = this.color.object()
-    currentColor = {
-      r: currentColor.r,
-      g: currentColor.g,
-      b: currentColor.b,
-      // Rename alpha -> a for ChromePicker
-      a: currentColor.alpha
-    }
-
-    const picker = <div
-      className="maputnik-color-picker-offset"
-      style={{
-	      position: 'fixed',
-	      zIndex: 1,
-        left: offset.left,
-        top: offset.top,
-      }}>
-      <ChromePicker
-        color={currentColor}
-        onChange={c => this.props.onChange(formatColor(c))}
-      />
-      <div
-        className="maputnik-color-picker-offset"
-        onClick={this.togglePicker.bind(this)}
-        style={{
-          zIndex: -1,
-          position: 'fixed',
-          top: '0px',
-          right: '0px',
-          bottom: '0px',
-          left: '0px',
-        }}
-      />
-    </div>
-
-    var swatchStyle = {
-      backgroundColor: this.props.value
-    };
-
-    return <div className="maputnik-color-wrapper">
-      {this.state.pickerOpened && picker}
-      <div className="maputnik-color-swatch" style={swatchStyle}></div>
-      <input
-        className="maputnik-color"
-        ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker.bind(this)}
-        style={this.props.style}
-        name={this.props.name}
-        placeholder={this.props.default}
-        value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.props.onChange(e.target.value)}
-      />
-    </div>
-  }
-}
-
-export default ColorField

src/components/fields/DocLabel.jsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class DocLabel extends React.Component {
-  static propTypes = {
-    label: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]).isRequired,
-    doc: PropTypes.string.isRequired,
-  }
-
-  render() {
-    return <label className="maputnik-doc-wrapper">
-      <div className="maputnik-doc-target">
-        <span>{this.props.label}</span>
-        <div className="maputnik-doc-popup">
-          {this.props.doc}
-        </div>
-      </div >
-    </label>
-  }
-}

src/components/fields/FunctionSpecField.jsx

@@ -1,139 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import SpecProperty from './_SpecProperty'
-import DataProperty from './_DataProperty'
-import ZoomProperty from './_ZoomProperty'
-
-
-function isZoomField(value) {
-  return typeof value === 'object' && value.stops && typeof value.property === 'undefined'
-}
-
-function isDataField(value) {
-  return typeof value === 'object' && value.stops && typeof value.property !== 'undefined'
-}
-
-/** Supports displaying spec field for zoom function objects
- * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
- */
-export default class FunctionSpecProperty  extends React.Component {
-  static propTypes = {
-      onChange: PropTypes.func.isRequired,
-      fieldName: PropTypes.string.isRequired,
-      fieldSpec: PropTypes.object.isRequired,
-
-      value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.array
-    ]),
-  }
-
-  addStop() {
-    const stops = this.props.value.stops.slice(0)
-    const lastStop = stops[stops.length - 1]
-    if (typeof lastStop[0] === "object") {
-      stops.push([
-        {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
-        lastStop[1]
-      ])
-    }
-    else {
-      stops.push([lastStop[0] + 1, lastStop[1]])
-    }
-
-    const changedValue = {
-      ...this.props.value,
-      stops: stops,
-    }
-
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  deleteStop(stopIdx) {
-    const stops = this.props.value.stops.slice(0)
-    stops.splice(stopIdx, 1)
-
-    let changedValue = {
-      ...this.props.value,
-      stops: stops,
-    }
-
-    if(stops.length === 1) {
-      changedValue = stops[0][1]
-    }
-
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  makeZoomFunction() {
-    const zoomFunc = {
-      stops: [
-        [6, this.props.value],
-        [10, this.props.value]
-      ]
-    }
-    this.props.onChange(this.props.fieldName, zoomFunc)
-  }
-
-  makeDataFunction() {
-    const dataFunc = {
-      property: "",
-      type: "categorical",
-      stops: [
-        [{zoom: 6, value: 0}, this.props.value],
-        [{zoom: 10, value: 0}, this.props.value]
-      ]
-    }
-    this.props.onChange(this.props.fieldName, dataFunc)
-  }
-
-  render() {
-    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
-    let specField;
-
-    if (isZoomField(this.props.value)) {
-      specField = (
-        <ZoomProperty
-          onChange={this.props.onChange.bind(this)}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
-          onAddStop={this.addStop.bind(this)}
-        />
-      )
-    }
-    else if (isDataField(this.props.value)) {
-      specField = (
-        <DataProperty
-          onChange={this.props.onChange.bind(this)}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onDeleteStop={this.deleteStop.bind(this)}
-          onAddStop={this.addStop.bind(this)}
-        />
-      )
-    }
-    else {
-      specField = (
-        <SpecProperty
-          onChange={this.props.onChange.bind(this)}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onZoomClick={this.makeZoomFunction.bind(this)}
-          onDataClick={this.makeDataFunction.bind(this)} 
-        />
-      )
-    }
-    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
-      {specField}
-    </div>
-  }
-}
-

src/components/fields/PropertyGroup.jsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import FunctionSpecField from './FunctionSpecField'
-const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
-
-/** Extract field spec by {@fieldName} from the {@layerType} in the
- * style specification from either the paint or layout group */
-function getFieldSpec(spec, layerType, fieldName) {
-  const groupName = getGroupName(spec, layerType, fieldName)
-  const group = spec[groupName + '_' + layerType]
-  const fieldSpec = group[fieldName]
-  if(iconProperties.indexOf(fieldName) >= 0) {
-    return {
-      ...fieldSpec,
-      values: spec.$root.sprite.values
-    }
-  }
-  if(fieldName === 'text-font') {
-    return {
-      ...fieldSpec,
-      values: spec.$root.glyphs.values
-    }
-  }
-  return fieldSpec
-}
-
-function getGroupName(spec, layerType, fieldName) {
-  const paint  = spec['paint_' + layerType] || {}
-  if (fieldName in paint) {
-    return 'paint'
-  } else {
-    return 'layout'
-  }
-}
-
-export default class PropertyGroup extends React.Component {
-  static propTypes = {
-    layer: PropTypes.object.isRequired,
-    groupFields: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    spec: PropTypes.object.isRequired,
-  }
-
-  onPropertyChange(property, newValue) {
-    const group = getGroupName(this.props.spec, this.props.layer.type, property)
-    this.props.onChange(group , property, newValue)
-  }
-
-  render() {
-    const fields = this.props.groupFields.map(fieldName => {
-      const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
-
-      const paint = this.props.layer.paint || {}
-      const layout = this.props.layer.layout || {}
-      const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
-
-      return <FunctionSpecField
-        onChange={this.onPropertyChange.bind(this)}
-        key={fieldName}
-        fieldName={fieldName}
-        value={fieldValue === undefined ? fieldSpec.default : fieldValue}
-        fieldSpec={fieldSpec}
-      />
-    })
-
-    return <div className="maputnik-property-group">
-      {fields}
-    </div>
-  }
-}

src/components/fields/SpecField.jsx

@@ -1,136 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import color from 'color'
-
-import ColorField from './ColorField'
-import NumberInput from '../inputs/NumberInput'
-import CheckboxInput from '../inputs/CheckboxInput'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-import MultiButtonInput from '../inputs/MultiButtonInput'
-import ArrayInput from '../inputs/ArrayInput'
-import DynamicArrayInput from '../inputs/DynamicArrayInput'
-import FontInput from '../inputs/FontInput'
-import IconInput from '../inputs/IconInput'
-import capitalize from 'lodash.capitalize'
-
-const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
-
-function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
-}
-
-function optionsLabelLength(options) {
-  let sum = 0;
-  options.forEach(([_, label]) => {
-    sum += label.length
-  })
-  return sum
-}
-
-/** Display any field from the Mapbox GL style spec and
- * choose the correct field component based on the @{fieldSpec}
- * to display @{value}. */
-export default class SpecField extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    fieldName: PropTypes.string.isRequired,
-    fieldSpec: PropTypes.object.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.array,
-      PropTypes.bool
-    ]),
-    /** Override the style of the field */
-    style: PropTypes.object,
-  }
-
-  render() {
-    const commonProps = {
-      style: this.props.style,
-      value: this.props.value,
-      default: this.props.fieldSpec.default,
-      name: this.props.fieldName,
-      onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
-    }
-
-    function childNodes() {
-      switch(this.props.fieldSpec.type) {
-        case 'number': return (
-          <NumberInput
-            {...commonProps}
-            min={this.props.fieldSpec.minimum}
-            max={this.props.fieldSpec.maximum}
-          />
-        )
-        case 'enum':
-          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
-
-          if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-            return <MultiButtonInput
-              {...commonProps}
-              options={options}
-            />
-          } else {
-            return <SelectInput
-              {...commonProps}
-              options={options}
-            />
-          }
-        case 'string':
-          if(iconProperties.indexOf(this.props.fieldName) >= 0) {
-            return <IconInput
-              {...commonProps}
-              icons={this.props.fieldSpec.values}
-            />
-          } else {
-            return <StringInput
-              {...commonProps}
-            />
-          }
-        case 'color': return (
-          <ColorField
-            {...commonProps}
-          />
-        )
-        case 'boolean': return (
-          <CheckboxInput
-            {...commonProps}
-          />
-        )
-        case 'array':
-          if(this.props.fieldName === 'text-font') {
-            return <FontInput
-              {...commonProps}
-              fonts={this.props.fieldSpec.values}
-            />
-          } else {
-            if (this.props.fieldSpec.length) {
-              return <ArrayInput
-                {...commonProps}
-                type={this.props.fieldSpec.value}
-                length={this.props.fieldSpec.length}
-              />
-            } else {
-              return <DynamicArrayInput
-                {...commonProps}
-                type={this.props.fieldSpec.value}
-              />
-            }
-          }
-        default: return null
-      }
-    }
-
-    return (
-      <div data-wd-key={"spec-field:"+this.props.fieldName}>
-      {childNodes.call(this)}
-      </div>
-    );
-  }
-}

src/components/fields/_DataProperty.jsx

@@ -1,182 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Button from '../Button'
-import SpecField from './SpecField'
-import NumberInput from '../inputs/NumberInput'
-import StringInput from '../inputs/StringInput'
-import SelectInput from '../inputs/SelectInput'
-import DocLabel from './DocLabel'
-import InputBlock from '../inputs/InputBlock'
-
-import labelFromFieldName from './_labelFromFieldName'
-import DeleteStopButton from './_DeleteStopButton'
-
-
-export default class DataProperty extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    onDeleteStop: PropTypes.func,
-    onAddStop: PropTypes.func,
-    fieldName: PropTypes.string,
-    fieldSpec: PropTypes.object,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.array
-    ]),
-  }
-
-  getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.function === "interpolated") {
-      return "exponential"
-    }
-    if (fieldSpec.type === "number") {
-      return "interval"
-    }
-    return "categorical"
-  }
-
-  getDataFunctionTypes(functionType) {
-    if (functionType === "interpolated") {
-      return ["categorical", "interval", "exponential"]
-    }
-    else {
-      return ["categorical", "interval"]
-    }
-  }
-
-
-  changeStop(changeIdx, stopData, value) {
-    const stops = this.props.value.stops.slice(0)
-    const changedStop = stopData.zoom === undefined ? stopData.value : stopData
-    stops[changeIdx] = [changedStop, value]
-    const changedValue = {
-      ...this.props.value,
-      stops: stops,
-    }
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  changeDataProperty(propName, propVal) {
-    if (propVal) {
-      this.props.value[propName] = propVal
-    }
-    else {
-      delete this.props.value[propName]
-    }
-    this.props.onChange(this.props.fieldName, this.props.value)
-  }
-
-  render() {
-    if (typeof this.props.value.type === "undefined") {
-      this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
-    }
-
-    const dataFields = this.props.value.stops.map((stop, idx) => {
-      const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
-      const dataLevel = typeof stop[0] === 'object' ? stop[0].value : stop[0];
-      const value = stop[1]
-      const deleteStopBtn = <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
-
-      const dataProps = {
-        label: "Data value",
-        value: dataLevel,
-        onChange: newData => this.changeStop(idx, { zoom: zoomLevel, value: newData }, value)
-      }
-
-      let dataInput;
-      if(this.props.value.type === "categorical") {
-        dataInput = <StringInput {...dataProps} />
-      }
-      else {
-        dataInput = <NumberInput {...dataProps} />
-      }
-
-      let zoomInput = null;
-      if(zoomLevel !== undefined) {
-        zoomInput = <div className="maputnik-data-spec-property-stop-edit">
-          <NumberInput
-            value={zoomLevel}
-            onChange={newZoom => this.changeStop(idx, {zoom: newZoom, value: dataLevel}, value)}
-            min={0}
-            max={22}
-          />
-        </div>
-      }
-
-      return <InputBlock key={idx} action={deleteStopBtn} label="">
-        {zoomInput}
-        <div className="maputnik-data-spec-property-stop-data">
-          {dataInput}
-        </div>
-        <div className="maputnik-data-spec-property-stop-value">
-          <SpecField
-            fieldName={this.props.fieldName}
-            fieldSpec={this.props.fieldSpec}
-            value={value}
-            onChange={(_, newValue) => this.changeStop(idx, {zoom: zoomLevel, value: dataLevel}, newValue)}
-          />
-        </div>
-      </InputBlock>
-    })
-
-    return <div className="maputnik-data-spec-block">
-    <div className="maputnik-data-spec-property">
-      <InputBlock
-        doc={this.props.fieldSpec.doc}
-        label={labelFromFieldName(this.props.fieldName)}
-      >
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Property"
-            doc={"Input a data property to base styles off of."}
-          />
-          <div className="maputnik-data-spec-property-input">
-            <StringInput
-              value={this.props.value.property}
-              onChange={propVal => this.changeDataProperty("property", propVal)}
-            />
-          </div>
-        </div>
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Type"
-            doc={"Select a type of data scale (default is 'categorical')."}
-          />
-          <div className="maputnik-data-spec-property-input">
-            <SelectInput
-              value={this.props.value.type}
-              onChange={propVal => this.changeDataProperty("type", propVal)}
-              options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
-            />
-          </div>
-        </div>
-        <div className="maputnik-data-spec-property-group">
-          <DocLabel
-            label="Default"
-            doc={"Input a default value for data if not covered by the scales."}
-          />
-          <div className="maputnik-data-spec-property-input">
-            <SpecField
-              fieldName={this.props.fieldName}
-              fieldSpec={this.props.fieldSpec}
-              value={this.props.value.default}
-              onChange={(_, propVal) => this.changeDataProperty("default", propVal)}
-            />
-          </div>
-        </div>
-      </InputBlock>
-    </div>
-      {dataFields}
-      <Button
-        className="maputnik-add-stop"
-        onClick={this.props.onAddStop.bind(this)}
-      >
-        Add stop
-      </Button>
-    </div>
-  }
-}

src/components/fields/_DeleteStopButton.jsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import DocLabel from './DocLabel'
-import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
-
-
-export default class DeleteStopButton extends React.Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-  }
-
-  render() {
-    return <Button
-      className="maputnik-delete-stop"
-      onClick={this.props.onClick}
-    >
-      <DocLabel
-        label={<DeleteIcon />}
-        doc={"Remove zoom level stop."}
-      />
-    </Button>
-  }
-}

src/components/fields/_FunctionButtons.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import DocLabel from './DocLabel'
-import Button from '../Button'
-import FunctionIcon from 'react-icons/lib/md/functions'
-import MdInsertChart from 'react-icons/lib/md/insert-chart'
-
-
-export default class FunctionButtons extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object,
-    onZoomClick: PropTypes.func,
-    onDataClick: PropTypes.func,
-  }
-
-  render() {
-    let makeZoomButton, makeDataButton
-    if (this.props.fieldSpec['zoom-function']) {
-      makeZoomButton = <Button
-        className="maputnik-make-zoom-function"
-        onClick={this.props.onZoomClick}
-      >
-        <DocLabel
-          label={<FunctionIcon />}
-          cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-        />
-      </Button>
-
-      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
-        makeDataButton = <Button
-          className="maputnik-make-data-function"
-          onClick={this.props.onDataClick}
-        >
-          <DocLabel
-            label={<MdInsertChart />}
-            cursorTargetStyle={{ cursor: 'pointer' }}
-            doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
-          />
-        </Button>
-      }
-      return <div>{makeDataButton}{makeZoomButton}</div>
-    }
-    else {
-      return null
-    }
-  }
-}

src/components/fields/_SpecProperty.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import SpecField from './SpecField'
-import FunctionButtons from './_FunctionButtons'
-import InputBlock from '../inputs/InputBlock'
-
-import labelFromFieldName from './_labelFromFieldName'
-
-
-export default class SpecProperty extends React.Component {
-  static propTypes = {
-    onZoomClick: PropTypes.func.isRequired,
-    onDataClick: PropTypes.func.isRequired,
-    fieldName: PropTypes.string,
-    fieldSpec: PropTypes.object
-  }
-
-  render() {
-    const functionBtn = <FunctionButtons
-      fieldSpec={this.props.fieldSpec}
-      onZoomClick={this.props.onZoomClick}
-      onDataClick={this.props.onDataClick} 
-    />
-
-    return <InputBlock
-      doc={this.props.fieldSpec.doc}
-      label={labelFromFieldName(this.props.fieldName)}
-      action={functionBtn}
-    >
-      <SpecField {...this.props} />
-    </InputBlock>
-  }
-}

src/components/fields/_ZoomProperty.jsx

@@ -1,161 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Button from '../Button'
-import SpecField from './SpecField'
-import NumberInput from '../inputs/NumberInput'
-import InputBlock from '../inputs/InputBlock'
-
-import DeleteStopButton from './_DeleteStopButton'
-import labelFromFieldName from './_labelFromFieldName'
-
-import docUid from '../../libs/document-uid'
-import sortNumerically from '../../libs/sort-numerically'
-
-
-export default class ZoomProperty extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    onDeleteStop: PropTypes.func,
-    onAddStop: PropTypes.func,
-    fieldName: PropTypes.string,
-    fieldSpec: PropTypes.object,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.array
-    ]),
-  }
-
-
-  constructor() {
-    super()
-    this.state = {
-      refs: {}
-    }
-  }
-
-  componentWillMount() {
-    this.setState({
-      refs: this.setStopRefs(this.props)
-    })
-  }
-
-  /**
-   * We cache a reference for each stop by its index.
-   *
-   * When the stops are reordered the references are also updated (see this.orderStops) this allows React to use the same key for the element and keep keyboard focus.
-   */
-  setStopRefs(props) {
-    // This is initialsed below only if required to improved performance.
-    let newRefs;
-
-    if(props.value && props.value.stops) {
-      props.value.stops.forEach((val, idx) => {
-        if(!this.state.refs.hasOwnProperty(idx)) {
-          if(!newRefs) {
-            newRefs = {...this.state.refs};
-          }
-          newRefs[idx] = docUid("stop-");
-        }
-      })
-    }
-
-    return newRefs;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const newRefs = this.setStopRefs(nextProps);
-    if(newRefs) {
-      this.setState({
-        refs: newRefs
-      })
-    }
-  }
-
-  // Order the stops altering the refs to reflect their new position.
-  orderStopsByZoom(stops) {
-    const mappedWithRef = stops
-      .map((stop, idx) => {
-        return {
-          ref: this.state.refs[idx],
-          data: stop
-        }
-      })
-    // Sort by zoom
-      .sort((a, b) => sortNumerically(a.data[0], b.data[0]));
-
-    // Fetch the new position of the stops
-    const newRefs = {};
-    mappedWithRef
-      .forEach((stop, idx) =>{
-        newRefs[idx] = stop.ref;
-      })
-
-    this.setState({
-      refs: newRefs
-    });
-
-    return mappedWithRef.map((item) => item.data);
-  }
-
-  changeZoomStop(changeIdx, stopData, value) {
-    const stops = this.props.value.stops.slice(0);
-    stops[changeIdx] = [stopData, value];
-
-    const orderedStops = this.orderStopsByZoom(stops);
-
-    const changedValue = {
-      ...this.props.value,
-      stops: orderedStops
-    }
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
-
-  render() {
-    const zoomFields = this.props.value.stops.map((stop, idx) => {
-      const zoomLevel = stop[0]
-      const key  = this.state.refs[idx];
-      const value = stop[1]
-      const deleteStopBtn= <DeleteStopButton onClick={this.props.onDeleteStop.bind(this, idx)} />
-
-      return <InputBlock
-        key={key}
-        doc={this.props.fieldSpec.doc}
-        label={labelFromFieldName(this.props.fieldName)}
-        action={deleteStopBtn}
-      >
-        <div>
-          <div className="maputnik-zoom-spec-property-stop-edit">
-            <NumberInput
-              value={zoomLevel}
-              onChange={changedStop => this.changeZoomStop(idx, changedStop, value)}
-              min={0}
-              max={22}
-            />
-          </div>
-          <div className="maputnik-zoom-spec-property-stop-value">
-            <SpecField
-              fieldName={this.props.fieldName}
-              fieldSpec={this.props.fieldSpec}
-              value={value}
-              onChange={(_, newValue) => this.changeZoomStop(idx, zoomLevel, newValue)}
-            />
-          </div>
-        </div>
-      </InputBlock>
-    });
-
-    return <div className="maputnik-zoom-spec-property">
-      {zoomFields}
-      <Button
-        className="maputnik-add-stop"
-        onClick={this.props.onAddStop.bind(this)}
-      >
-        Add stop
-      </Button>
-    </div>
-  }
-}

src/components/fields/_labelFromFieldName.js

@@ -1,6 +0,0 @@
-import capitalize from 'lodash.capitalize'
-
-export default function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  return capitalize(label)
-}

src/components/filter/FilterEditor.jsx

@@ -1,114 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { combiningFilterOps } from '../../libs/filterops.js'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import DocLabel from '../fields/DocLabel'
-import SelectInput from '../inputs/SelectInput'
-import SingleFilterEditor from './SingleFilterEditor'
-import FilterEditorBlock from './FilterEditorBlock'
-import Button from '../Button'
-
-import DeleteIcon from 'react-icons/lib/md/delete'
-import AddIcon from 'react-icons/lib/fa/plus'
-
-function hasCombiningFilter(filter) {
-  return combiningFilterOps.indexOf(filter[0]) >= 0
-}
-
-function hasNestedCombiningFilter(filter) {
-  if(hasCombiningFilter(filter)) {
-    const combinedFilters = filter.slice(1)
-    return filter.slice(1).map(f => hasCombiningFilter(f)).filter(f => f == true).length > 0
-  }
-  return false
-}
-
-export default class CombiningFilterEditor extends React.Component {
-  static propTypes = {
-    /** Properties of the vector layer and the available fields */
-    properties: PropTypes.object,
-    filter: PropTypes.array,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  // Convert filter to combining filter
-  combiningFilter() {
-    let filter = this.props.filter || ['all']
-
-    let combiningOp = filter[0]
-    let filters = filter.slice(1)
-
-    if(combiningFilterOps.indexOf(combiningOp) < 0) {
-      combiningOp = 'all'
-      filters = [filter.slice(0)]
-    }
-
-    return [combiningOp, ...filters]
-  }
-
-  onFilterPartChanged(filterIdx, newPart) {
-    const newFilter = this.combiningFilter().slice(0)
-    newFilter[filterIdx] = newPart
-    this.props.onChange(newFilter)
-  }
-
-  deleteFilterItem(filterIdx) {
-    const newFilter = this.combiningFilter().slice(0)
-    console.log('Delete', filterIdx, newFilter)
-    newFilter.splice(filterIdx + 1, 1)
-    this.props.onChange(newFilter)
-  }
-
-  addFilterItem() {
-    const newFilterItem = this.combiningFilter().slice(0)
-    newFilterItem.push(['==', 'name', ''])
-    this.props.onChange(newFilterItem)
-  }
-
-  render() {
-    const filter = this.combiningFilter()
-    let combiningOp = filter[0]
-    let filters = filter.slice(1)
-
-    const editorBlocks = filters.map((f, idx) => {
-      return <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
-        <SingleFilterEditor
-          properties={this.props.properties}
-          filter={f}
-          onChange={this.onFilterPartChanged.bind(this, idx + 1)}
-        />
-      </FilterEditorBlock>
-    })
-
-    //TODO: Implement support for nested filter
-    if(hasNestedCombiningFilter(filter)) {
-      return <div className="maputnik-filter-editor-unsupported">
-        Nested filters are not supported.
-      </div>
-    }
-
-    return <div className="maputnik-filter-editor">
-      <div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
-        <DocLabel
-          label={"Compound Filter"}
-          doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
-        />
-        <SelectInput
-          value={combiningOp}
-          onChange={this.onFilterPartChanged.bind(this, 0)}
-          options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
-        />
-      </div>
-      {editorBlocks}
-      <div className="maputnik-filter-editor-add-wrapper">
-        <Button
-          data-wd-key="layer-filter-button"
-          className="maputnik-add-filter"
-          onClick={this.addFilterItem.bind(this)}>
-          Add filter
-        </Button>
-      </div>
-    </div>
-  }
-}

src/components/filter/FilterEditorBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
-
-class FilterEditorBlock extends React.Component {
-  static propTypes = {
-    onDelete: PropTypes.func.isRequired,
-    children: PropTypes.element.isRequired,
-  }
-
-  render() {
-    return <div className="maputnik-filter-editor-block">
-      <div className="maputnik-filter-editor-block-action">
-        <Button
-          className="maputnik-delete-filter"
-          onClick={this.props.onDelete}
-        >
-          <DeleteIcon />
-        </Button>
-      </div>
-      <div className="maputnik-filter-editor-block-content">
-        {this.props.children}
-      </div>
-    </div>
-  }
-}
-
-export default FilterEditorBlock

src/components/filter/SingleFilterEditor.jsx

@@ -1,93 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { otherFilterOps } from '../../libs/filterops.js'
-import StringInput from '../inputs/StringInput'
-import AutocompleteInput from '../inputs/AutocompleteInput'
-import SelectInput from '../inputs/SelectInput'
-
-function tryParseInt(v) {
-  if (v === '') return v
-  if (isNaN(v)) return v
-  return parseFloat(v)
-}
-
-function tryParseBool(v) {
-  const isString = (typeof(v) === "string");
-  if(!isString) {
-    return v;
-  }
-
-  if(v.match(/^\s*true\s*$/)) {
-    return true;
-  }
-  else if(v.match(/^\s*false\s*$/)) {
-    return false;
-  }
-  else {
-    return v;
-  }
-}
-
-function parseFilter(v) {
-  v = tryParseInt(v);
-  v = tryParseBool(v);
-  return v;
-}
-
-class SingleFilterEditor extends React.Component {
-  static propTypes = {
-    filter: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    properties: PropTypes.object,
-  }
-
-  static defaultProps = {
-    properties: {},
-  }
-
-  onFilterPartChanged(filterOp, propertyName, filterArgs) {
-    let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)]
-    if(filterOp === 'has' || filterOp === '!has') {
-      newFilter = [filterOp, propertyName]
-    } else if(filterArgs.length === 0) {
-      newFilter = [filterOp, propertyName, '']
-    }
-    this.props.onChange(newFilter)
-  }
-
-  render() {
-    const f = this.props.filter
-    const filterOp = f[0]
-    const propertyName = f[1]
-    const filterArgs = f.slice(2)
-
-    return <div className="maputnik-filter-editor-single">
-      <div className="maputnik-filter-editor-property">
-        <AutocompleteInput
-          value={propertyName}
-          options={Object.keys(this.props.properties).map(propName => [propName, propName])}
-          onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
-        />
-      </div>
-      <div className="maputnik-filter-editor-operator">
-        <SelectInput
-          value={filterOp}
-          onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
-          options={otherFilterOps}
-        />
-      </div>
-      {filterArgs.length > 0 &&
-      <div className="maputnik-filter-editor-args">
-        <StringInput
-          value={filterArgs.join(',')}
-          onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
-        />
-      </div>
-      }
-    </div>
-  }
-
-}
-
-export default SingleFilterEditor

src/components/icons/BackgroundIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class BackgroundIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="m 1.821019,10.255581 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 z" />
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/CircleIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class FillIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path transform="translate(2 2)" d="M7.5,0C11.6422,0,15,3.3578,15,7.5S11.6422,15,7.5,15 S0,11.6422,0,7.5S3.3578,0,7.5,0z M7.5,1.6666c-3.2217,0-5.8333,2.6117-5.8333,5.8334S4.2783,13.3334,7.5,13.3334 s5.8333-2.6117,5.8333-5.8334S10.7217,1.6666,7.5,1.6666z"></path>
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/FillIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class FillIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 2.84978,9.763512 9.462149,4.7316391 16.47225,9.478015 9.859886,14.509879 2.84978,9.763512 m -1.028761,0.492069 7.414535,5.020197 c 0.372277,0.25206 0.958697,0.239771 1.30985,-0.02745 L 17.539255,9.926162 C 17.89041,9.658941 17.873288,9.238006 17.501015,8.985946 L 10.08648,3.9657402 C 9.714204,3.7136802 9.127782,3.7259703 8.776627,3.9931918 L 1.782775,9.315365 c -0.3511551,0.267221 -0.3340331,0.688156 0.03824,0.940216 l 0,0 z" />
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/LayerIcon.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import LineIcon from './LineIcon.jsx'
-import FillIcon from './FillIcon.jsx'
-import SymbolIcon from './SymbolIcon.jsx'
-import BackgroundIcon from './BackgroundIcon.jsx'
-import CircleIcon from './CircleIcon.jsx'
-
-class LayerIcon extends React.Component {
-  static propTypes = {
-    type: PropTypes.string.isRequired,
-    style: PropTypes.object,
-  }
-
-  render() {
-    const iconProps = { style: this.props.style }
-    switch(this.props.type) {
-      case 'fill-extrusion': return <BackgroundIcon {...iconProps} />
-      case 'raster': return <FillIcon {...iconProps} />
-      case 'hillshade': return <FillIcon {...iconProps} />
-      case 'heatmap': return <FillIcon {...iconProps} />
-      case 'fill': return <FillIcon {...iconProps} />
-      case 'background': return <BackgroundIcon {...iconProps} />
-      case 'line': return <LineIcon {...iconProps} />
-      case 'symbol': return <SymbolIcon {...iconProps} />
-      case 'circle': return <CircleIcon {...iconProps} />
-    }
-  }
-}
-
-export default LayerIcon

src/components/icons/LineIcon.jsx

@@ -1,15 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class FillIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <path d="M 12.34,1.29 C 12.5114,1.1076 12.7497,1.0029 13,1 13.5523,1 14,1.4477 14,2 14.0047,2.2478 13.907,2.4866 13.73,2.66 9.785626,6.5516986 6.6148407,9.7551593 2.65,13.72 2.4793,13.8963 2.2453,13.9971 2,14 1.4477,14 1,13.5523 1,13 0.9953,12.7522 1.093,12.5134 1.27,12.34 4.9761967,8.7018093 9.0356422,4.5930579 12.34,1.29 Z" transform="translate(2,2)" />
-      </IconBase>
-    )
-  }
-}
-
-

src/components/icons/SymbolIcon.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import IconBase from 'react-icon-base'
-
-
-export default class SymbolIcon extends React.Component {
-  render() {
-    return (
-      <IconBase viewBox="0 0 20 20" {...this.props}>
-        <g transform="matrix(1.2718518,0,0,1.2601269,16.559526,-7.4065264)">
-          <path d="m -9.7959773,11.060163 c -0.3734787,-0.724437 -0.3580577,-1.2147051 -0.00547,-1.8767873 l 8.6034029,-0.019416 c 0.39670292,0.6865644 0.38365934,1.4750693 -0.011097,1.8864953 l -3.1359613,-0.0033 -0.013695,7.1305 c -0.4055357,0.397083 -1.3146432,0.397083 -1.7769191,-0.02274 l 0.030226,-7.104422 z" />
-        </g>
-      </IconBase>
-    )
-  }
-}
-
-
-

src/components/inputs/ArrayInput.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StringInput from './StringInput'
-import NumberInput from './NumberInput'
-
-class ArrayInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    length: PropTypes.number,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-  }
-
-  changeValue(idx, newValue) {
-    console.log(idx, newValue)
-    const values = this.values.slice(0)
-    values[idx] = newValue
-    this.props.onChange(values)
-  }
-
-  get values() {
-    return this.props.value || this.props.default || []
-  }
-
-  render() {
-    const inputs = this.values.map((v, i) => {
-      if(this.props.type === 'number') {
-        return <NumberInput
-          key={i}
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      } else {
-        return <StringInput
-          key={i}
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-    })
-
-    return <div className="maputnik-array">
-      {inputs}
-    </div>
-  }
-}
-
-export default ArrayInput

src/components/inputs/AutocompleteInput.jsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Autocomplete from 'react-autocomplete'
-
-
-const MAX_HEIGHT = 140;
-
-class AutocompleteInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    options: PropTypes.array,
-    onChange: PropTypes.func,
-    keepMenuWithinWindowBounds: PropTypes.bool
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    options: [],
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
-  calcMaxHeight() {
-    if(this.props.keepMenuWithinWindowBounds) {
-      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
-      const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
-
-      if(limitedMaxHeight != this.state.maxHeight) {
-        this.setState({
-          maxHeight: limitedMaxHeight
-        })
-      }
-    }
-  }
-  componentDidMount() {
-    this.calcMaxHeight();
-  }
-
-  componentDidUpdate() {
-    this.calcMaxHeight();
-  }
-
-  render() {
-    return <div
-      ref={(el) => {
-        this.autocompleteMenuEl = el;
-      }}
-    >
-      <Autocomplete
-        menuStyle={{
-          position: "fixed",
-          overflow: "auto",
-          maxHeight: this.state.maxHeight
-        }}
-        wrapperProps={{
-          className: "maputnik-autocomplete",
-          style: null
-        }}
-        inputProps={{
-          className: "maputnik-string"
-        }}
-        value={this.props.value}
-        items={this.props.options}
-        getItemValue={(item) => item[0]}
-        onSelect={v => this.props.onChange(v)}
-        onChange={(e, v) => this.props.onChange(v)}
-        shouldItemRender={(item, value) => {
-          return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
-        }}
-        renderItem={(item, isHighlighted) => (
-          <div
-            key={item[0]}
-            className={classnames({
-              "maputnik-autocomplete-menu-item": true,
-              "maputnik-autocomplete-menu-item-selected": isHighlighted,
-            })}
-          >
-           {item[1]}
-          </div>
-        )}
-      />
-    </div>
-  }
-}
-
-export default AutocompleteInput

src/components/inputs/CheckboxInput.jsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class CheckboxInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.bool.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-  }
-
-  render() {
-    return <label className="maputnik-checkbox-wrapper">
-      <input
-        className="maputnik-checkbox"
-        type="checkbox"
-        style={this.props.style}
-        onChange={e => this.props.onChange(!this.props.value)}
-        checked={this.props.value}
-      />
-      <div className="maputnik-checkbox-box">
-        <svg style={{
-            display: this.props.value ? 'inline' : 'none'
-          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
-          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
-        </svg>
-      </div>
-    </label>
-  }
-}
-
-export default CheckboxInput

src/components/inputs/DynamicArrayInput.jsx

@@ -1,106 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StringInput from './StringInput'
-import NumberInput from './NumberInput'
-import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
-import DocLabel from '../fields/DocLabel'
-
-
-class DynamicArrayInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-    style: PropTypes.object,
-  }
-
-  changeValue(idx, newValue) {
-    console.log(idx, newValue)
-    const values = this.values.slice(0)
-    values[idx] = newValue
-    this.props.onChange(values)
-  }
-
-  get values() {
-    return this.props.value || this.props.default || []
-  }
-
-  addValue() {
-    const values = this.values.slice(0)
-    if (this.props.type === 'number') {
-      values.push(0)
-    } else {
-      values.push("")
-    }
-    
-
-    this.props.onChange(values)
-  }
-
-  deleteValue(valueIdx) {
-    const values = this.values.slice(0)
-    values.splice(valueIdx, 1)
-
-    this.props.onChange(values)
-  }
-
-  render() {
-    const inputs = this.values.map((v, i) => {
-      const deleteValueBtn= <DeleteValueButton onClick={this.deleteValue.bind(this, i)} />
-      const input = this.props.type === 'number' 
-        ? <NumberInput
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-        : <StringInput
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-
-      return <div
-        style={this.props.style}
-        key={i}
-        className="maputnik-array-block"
-        >
-        <div className="maputnik-array-block-action">
-          {deleteValueBtn}
-        </div>
-        <div className="maputnik-array-block-content">
-          {input}
-        </div>
-      </div>
-    })
-
-    return <div className="maputnik-array">
-      {inputs}
-      <Button
-        className="maputnik-array-add-value"
-        onClick={this.addValue.bind(this)}
-      >
-        Add value
-      </Button>
-    </div>
-  }
-}
-
-class DeleteValueButton extends React.Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-  }
-
-  render() {
-    return <Button
-      className="maputnik-delete-stop"
-      onClick={this.props.onClick}
-    >
-      <DocLabel
-        label={<DeleteIcon />}
-        doc={"Remove array entry."}
-      />
-    </Button>
-  }
-}
-
-export default DynamicArrayInput

src/components/inputs/FontInput.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import AutocompleteInput from './AutocompleteInput'
-
-class FontInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.array.isRequired,
-    default: PropTypes.array,
-    fonts: PropTypes.array,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    fonts: []
-  }
-
-  get values() {
-   return this.props.value || this.props.default.slice(1) || []
-  }
-
-  changeFont(idx, newValue) {
-    const changedValues = this.values.slice(0)
-    changedValues[idx] = newValue
-    this.props.onChange(changedValues)
-  }
-
-  render() {
-    const inputs = this.values.map((value, i) => {
-      return <AutocompleteInput
-        key={i}
-        value={value}
-        options={this.props.fonts.map(f => [f, f])}
-        onChange={this.changeFont.bind(this, i)}
-      />
-    })
-
-    return <div className="maputnik-font">
-      {inputs}
-    </div>
-  }
-}
-
-export default FontInput

src/components/inputs/IconInput.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import AutocompleteInput from './AutocompleteInput'
-
-
-class IconInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    icons: PropTypes.array,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    icons: []
-  }
-
-  render() {
-    return <AutocompleteInput
-      value={this.props.value}
-      options={this.props.icons.map(f => [f, f])}
-      onChange={this.props.onChange}
-      wrapperStyle={this.props.style}
-    />
-  }
-}
-
-export default IconInput

src/components/inputs/InputBlock.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import DocLabel from '../fields/DocLabel'
-
-/** Wrap a component with a label */
-class InputBlock extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    label: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-    ]).isRequired,
-    doc: PropTypes.string,
-    action: PropTypes.element,
-    children: PropTypes.node.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-  }
-
-  onChange(e) {
-    const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
-  }
-
-  render() {
-    return <div style={this.props.style}
-      data-wd-key={this.props["data-wd-key"]}
-      className={classnames({
-        "maputnik-input-block": true,
-        "maputnik-action-block": this.props.action
-      })}
-      >
-      {this.props.doc &&
-      <div className="maputnik-input-block-label">
-        <DocLabel
-          label={this.props.label}
-          doc={this.props.doc}
-        />
-      </div>
-      }
-      {!this.props.doc &&
-      <label className="maputnik-input-block-label">
-        {this.props.label}
-      </label>
-      }
-      {this.props.action &&
-      <div className="maputnik-input-block-action">
-        {this.props.action}
-      </div>
-      }
-      <div className="maputnik-input-block-content">
-        {this.props.children}
-      </div>
-    </div>
-  }
-}
-
-export default InputBlock

src/components/inputs/MultiButtonInput.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import Button from '../Button'
-
-class MultiButtonInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    options: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    let options = this.props.options
-    if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
-    }
-
-    const selectedValue = this.props.value || options[0][0]
-    const buttons = options.map(([val, label])=> {
-      return <Button
-        key={val}
-        onClick={e => this.props.onChange(val)}
-        className={classnames({"maputnik-button-selected": val === selectedValue})}
-      >
-        {label}
-      </Button>
-    })
-
-    return <div className="maputnik-multibutton">
-      {buttons}
-    </div>
-  }
-}
-
-export default MultiButtonInput

src/components/inputs/NumberInput.jsx

@@ -1,79 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class NumberInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    default: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    onChange: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: props.value
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value })
-  }
-
-  changeValue(newValue) {
-    const value = parseFloat(newValue)
-
-    const hasChanged = this.state.value !== value
-    if(this.isValid(value) && hasChanged) {
-      this.props.onChange(value)
-    } else {
-      this.setState({ value: newValue })
-    }
-  }
-
-  isValid(v) {
-    const value = parseFloat(v)
-    if(isNaN(value)) {
-      return false
-    }
-
-    if(!isNaN(this.props.min) && value < this.props.min) {
-      return false
-    }
-
-    if(!isNaN(this.props.max) && value > this.props.max) {
-      return false
-    }
-
-    return true
-  }
-
-  resetValue() {
-    // Reset explicitly to default value if value has been cleared
-    if(this.state.value === "") {
-      return this.changeValue(this.props.default)
-    }
-
-    // If set value is invalid fall back to the last valid value from props or at last resort the default value
-    if(!this.isValid(this.state.value)) {
-      if(this.isValid(this.props.value)) {
-        this.changeValue(this.props.value)
-      } else {
-        this.changeValue(this.props.default)
-      }
-    }
-  }
-
-  render() {
-    return <input
-      className="maputnik-number"
-      placeholder={this.props.default}
-      value={this.state.value}
-      onChange={e => this.changeValue(e.target.value)}
-      onBlur={this.resetValue.bind(this)}
-    />
-  }
-}
-
-export default NumberInput

src/components/inputs/SelectInput.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class SelectInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    "data-wd-key": PropTypes.string.isRequired,
-    options: PropTypes.array.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
-
-
-  render() {
-    let options = this.props.options
-    if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
-    }
-
-    return <select
-      className="maputnik-select"
-      data-wd-key={this.props["data-wd-key"]}
-      style={this.props.style}
-      value={this.props.value}
-      onChange={e => this.props.onChange(e.target.value)}
-    >
-      { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
-    </select>
-  }
-}
-
-export default SelectInput

src/components/inputs/StringInput.jsx

@@ -1,61 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class StringInput extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    multi: PropTypes.bool,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: props.value || ''
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({ value: nextProps.value || '' })
-  }
-
-  render() {
-    let tag;
-    let classes;
-
-    if(!!this.props.multi) {
-      tag = "textarea"
-      classes = [
-        "maputnik-string",
-        "maputnik-string--multi"
-      ]
-    }
-    else {
-      tag = "input"
-      classes = [
-        "maputnik-string"
-      ]
-    }
-
-    return React.createElement(tag, {
-      "data-wd-key": this.props["data-wd-key"],
-      className: classes.join(" "),
-      style: this.props.style,
-      value: this.state.value,
-      placeholder: this.props.default,
-      onChange: e => {
-        this.setState({
-          value: e.target.value
-        })
-      },
-      onBlur: () => {
-        if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
-      }
-    });
-  }
-}
-
-export default StringInput

src/components/layers/Collapser.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
-import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
-
-export default class Collapser extends React.Component {
-  static propTypes = {
-    isCollapsed: PropTypes.bool.isRequired,
-    style: PropTypes.object,
-  }
-
-  render() {
-    const iconStyle = {
-      width: 20,
-      height: 20,
-      ...this.props.style,
-    }
-    return this.props.isCollapsed ? <CollapseCloseIcon style={iconStyle}/> : <CollapseOpenIcon style={iconStyle} />
-  }
-}
-

src/components/layers/CommentBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-
-class MetadataBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <InputBlock
-      label={"Comments"}
-      doc={"Comments for the current layer. This is non-standard and not in the spec."}
-      data-wd-key="layer-comment"
-    >
-      <StringInput
-        multi={true}
-        value={this.props.value}
-        onChange={this.props.onChange}
-        default="Comment..."
-      />
-    </InputBlock>
-  }
-}
-
-export default MetadataBlock

src/components/layers/JSONEditor.jsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {Controlled as CodeMirror} from 'react-codemirror2'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/addon/lint/lint.css'
-import '../../codemirror-maputnik.css'
-import jsonlint from 'jsonlint'
-
-// This is mainly because of this issue <https://github.com/zaach/jsonlint/issues/57> also the API has changed, see comment in file
-import '../../vendor/codemirror/addon/lint/json-lint'
-
-
-class JSONEditor extends React.Component {
-  static propTypes = {
-    layer: PropTypes.object.isRequired,
-    onChange: PropTypes.func,
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      code: JSON.stringify(props.layer, null, 2)
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      code: JSON.stringify(nextProps.layer, null, 2)
-    })
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    try {
-      const parsedLayer = JSON.parse(this.state.code)
-      // If the structure is still the same do not update
-      // because it affects editing experience by reformatting all the time
-      return nextState.code !== JSON.stringify(parsedLayer, null, 2)
-    } catch(err) {
-      return true
-    }
-  }
-
-  onCodeUpdate(newCode) {
-    try {
-      const parsedLayer = JSON.parse(newCode)
-      this.props.onChange(parsedLayer)
-    } catch(err) {
-      console.warn(err)
-    } finally {
-      this.setState({
-        code: newCode
-      })
-    }
-  }
-
-  resetValue() {
-    console.log('reset')
-    this.setState({
-      code: JSON.stringify(this.props.layer, null, 2)
-    })
-  }
-
-  render() {
-    const codeMirrorOptions = {
-      mode: {name: "javascript", json: true},
-      tabSize: 2,
-      theme: 'maputnik',
-      viewportMargin: Infinity,
-      lineNumbers: true,
-      lint: true,
-      gutters: ["CodeMirror-lint-markers"],
-      scrollbarStyle: "null",
-    }
-
-    return <CodeMirror
-      value={this.state.code}
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
-      onFocusChange={focused => focused ? true : this.resetValue()}
-      options={codeMirrorOptions}
-    />
-  }
-}
-
-export default JSONEditor

src/components/layers/LayerEditor.jsx

@@ -1,200 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import JSONEditor from './JSONEditor'
-import FilterEditor from '../filter/FilterEditor'
-import PropertyGroup from '../fields/PropertyGroup'
-import LayerEditorGroup from './LayerEditorGroup'
-import LayerTypeBlock from './LayerTypeBlock'
-import LayerIdBlock from './LayerIdBlock'
-import MinZoomBlock from './MinZoomBlock'
-import MaxZoomBlock from './MaxZoomBlock'
-import CommentBlock from './CommentBlock'
-import LayerSourceBlock from './LayerSourceBlock'
-import LayerSourceLayerBlock from './LayerSourceLayerBlock'
-
-import InputBlock from '../inputs/InputBlock'
-import MultiButtonInput from '../inputs/MultiButtonInput'
-
-import { changeType, changeProperty } from '../../libs/layer'
-import layout from '../../config/layout.json'
-
-
-function layoutGroups(layerType) {
-  const layerGroup = {
-    title: 'Layer',
-    type: 'layer'
-  }
-  const filterGroup = {
-    title: 'Filter',
-    type: 'filter'
-  }
-  const editorGroup = {
-    title: 'JSON Editor',
-    type: 'jsoneditor'
-  }
-    return [layerGroup, filterGroup].concat(layout[layerType].groups).concat([editorGroup])
-}
-
-/** Layer editor supporting multiple types of layers. */
-export default class LayerEditor extends React.Component {
-  static propTypes = {
-    layer: PropTypes.object.isRequired,
-    sources: PropTypes.object,
-    vectorLayers: PropTypes.object,
-    spec: PropTypes.object.isRequired,
-    onLayerChanged: PropTypes.func,
-    onLayerIdChange: PropTypes.func,
-  }
-
-  static defaultProps = {
-    onLayerChanged: () => {},
-    onLayerIdChange: () => {},
-    onLayerDestroyed: () => {},
-  }
-
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  constructor(props) {
-    super(props)
-
-    //TODO: Clean this up and refactor into function
-    const editorGroups = {}
-    layoutGroups(this.props.layer.type).forEach(group => {
-      editorGroups[group.title] = true
-    })
-
-    this.state = { editorGroups }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const additionalGroups = { ...this.state.editorGroups }
-
-    layout[nextProps.layer.type].groups.forEach(group => {
-      if(!(group.title in additionalGroups)) {
-        additionalGroups[group.title] = true
-      }
-    })
-
-    this.setState({
-      editorGroups: additionalGroups
-    })
-  }
-
-  getChildContext () {
-    return {
-      reactIconBase: {
-        size: 14,
-        color: '#8e8e8e',
-      }
-    }
-  }
-
-  changeProperty(group, property, newValue) {
-    this.props.onLayerChanged(changeProperty(this.props.layer, group, property, newValue))
-  }
-
-  onGroupToggle(groupTitle, active) {
-    const changedActiveGroups = {
-      ...this.state.editorGroups,
-      [groupTitle]: active,
-    }
-    this.setState({
-      editorGroups: changedActiveGroups
-    })
-  }
-
-  renderGroupType(type, fields) {
-    let comment = ""
-    if(this.props.layer.metadata) {
-      comment = this.props.layer.metadata['maputnik:comment']
-    }
-
-    let sourceLayerIds;
-    if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
-      sourceLayerIds = this.props.sources[this.props.layer.source].layers;
-    }
-
-    switch(type) {
-      case 'layer': return <div>
-        <LayerIdBlock
-          value={this.props.layer.id}
-          wdKey="layer-editor.layer-id"
-          onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
-        />
-        <LayerTypeBlock
-          value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}
-        />
-        {this.props.layer.type !== 'background' && <LayerSourceBlock
-          sourceIds={Object.keys(this.props.sources)}
-          value={this.props.layer.source}
-          onChange={v => this.changeProperty(null, 'source', v)}
-        />
-        }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
-        <LayerSourceLayerBlock
-          sourceLayerIds={sourceLayerIds}
-          value={this.props.layer['source-layer']}
-          onChange={v => this.changeProperty(null, 'source-layer', v)}
-        />
-        }
-        <MinZoomBlock
-          value={this.props.layer.minzoom}
-          onChange={v => this.changeProperty(null, 'minzoom', v)}
-        />
-        <MaxZoomBlock
-          value={this.props.layer.maxzoom}
-          onChange={v => this.changeProperty(null, 'maxzoom', v)}
-        />
-        <CommentBlock
-          value={comment}
-          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
-        />
-      </div>
-      case 'filter': return <div>
-        <div className="maputnik-filter-editor-wrapper">
-          <FilterEditor
-            filter={this.props.layer.filter}
-            properties={this.props.vectorLayers[this.props.layer['source-layer']]}
-            onChange={f => this.changeProperty(null, 'filter', f)}
-          />
-        </div>
-      </div>
-      case 'properties': return <PropertyGroup
-        layer={this.props.layer}
-        groupFields={fields}
-        spec={this.props.spec}
-        onChange={this.changeProperty.bind(this)}
-      />
-      case 'jsoneditor': return <JSONEditor
-        layer={this.props.layer}
-        onChange={this.props.onLayerChanged}
-      />
-    }
-  }
-
-  render() {
-    const layerType = this.props.layer.type
-    const groups = layoutGroups(layerType).filter(group => {
-      return !(layerType === 'background' && group.type === 'source')
-    }).map(group => {
-      return <LayerEditorGroup
-        data-wd-key={group.title}
-        key={group.title}
-        title={group.title}
-        isActive={this.state.editorGroups[group.title]}
-        onActiveToggle={this.onGroupToggle.bind(this, group.title)}
-      >
-        {this.renderGroupType(group.type, group.fields)}
-      </LayerEditorGroup>
-    })
-
-    return <div className="maputnik-layer-editor"
-      >
-      {groups}
-    </div>
-  }
-}

src/components/layers/LayerEditorGroup.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Collapse from 'react-collapse'
-import Collapser from './Collapser'
-
-export default class LayerEditorGroup extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    title: PropTypes.string.isRequired,
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired,
-    onActiveToggle: PropTypes.func.isRequired
-  }
-
-  render() {
-    return <div>
-      <div className="maputnik-layer-editor-group"
-        data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
-        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
-      >
-        <span>{this.props.title}</span>
-        <span style={{flexGrow: 1}} />
-        <Collapser isCollapsed={this.props.isActive} />
-      </div>
-      <Collapse isOpened={this.props.isActive}>
-        <div className="react-collapse-container">
-          {this.props.children}
-        </div>
-      </Collapse>
-    </div>
-  }
-}

src/components/layers/LayerIdBlock.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-
-class LayerIdBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    wdKey: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
-      data-wd-key={this.props.wdKey}
-    >
-      <StringInput
-        value={this.props.value}
-        onChange={this.props.onChange}
-      />
-    </InputBlock>
-  }
-}
-
-export default LayerIdBlock

src/components/layers/LayerList.jsx

@@ -1,254 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import cloneDeep from 'lodash.clonedeep'
-
-import Button from '../Button'
-import LayerListGroup from './LayerListGroup'
-import LayerListItem from './LayerListItem'
-import AddIcon from 'react-icons/lib/md/add-circle-outline'
-import AddModal from '../modals/AddModal'
-
-import style from '../../libs/style.js'
-import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
-
-const layerListPropTypes = {
-  layers: PropTypes.array.isRequired,
-  selectedLayerIndex: PropTypes.number.isRequired,
-  onLayersChange: PropTypes.func.isRequired,
-  onLayerSelect: PropTypes.func,
-  sources: PropTypes.object.isRequired,
-}
-
-function layerPrefix(name) {
-  return name.replace(' ', '-').replace('_', '-').split('-')[0]
-}
-
-function findClosestCommonPrefix(layers, idx) {
-  const currentLayerPrefix = layerPrefix(layers[idx].id)
-  let closestIdx = idx
-  for (let i = idx; i > 0; i--) {
-    const previousLayerPrefix = layerPrefix(layers[i-1].id)
-    if(previousLayerPrefix === currentLayerPrefix) {
-      closestIdx = i - 1
-    } else {
-      return closestIdx
-    }
-  }
-  return closestIdx
-}
-
-// List of collapsible layer editors
-@SortableContainer
-class LayerListContainer extends React.Component {
-  static propTypes = {...layerListPropTypes}
-  static defaultProps = {
-    onLayerSelect: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      collapsedGroups: {},
-      areAllGroupsExpanded: false,
-      isOpen: {
-        add: false,
-      }
-    }
-  }
-
-  onLayerDestroy(layerId) {
-    const remainingLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(remainingLayers, layerId)
-    remainingLayers.splice(idx, 1);
-    this.props.onLayersChange(remainingLayers)
-  }
-
-  onLayerCopy(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const clonedLayer = cloneDeep(changedLayers[idx])
-    clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(idx, 0, clonedLayer)
-    this.props.onLayersChange(changedLayers)
-  }
-
-  onLayerVisibilityToggle(layerId) {
-    const changedLayers = this.props.layers.slice(0)
-    const idx = style.indexOfLayer(changedLayers, layerId)
-
-    const layer = { ...changedLayers[idx] }
-    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
-    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
-
-    layer.layout = changedLayout
-    changedLayers[idx] = layer
-    this.props.onLayersChange(changedLayers)
-  }
-
-  toggleModal(modalName) {
-    this.setState({
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
-      }
-    })
-  }
-
-  toggleLayers() {
-    let idx=0
-
-    let newGroups=[]
-
-    this.groupedLayers().forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
-      const lookupKey = [groupPrefix, idx].join('-')
-      
-
-      if (layers.length > 1) {
-        newGroups[lookupKey] = this.state.areAllGroupsExpanded
-      }
-      
-      layers.forEach((layer) => {
-        idx += 1
-      })
-    });
-
-    this.setState({
-      collapsedGroups: newGroups,
-      areAllGroupsExpanded: !this.state.areAllGroupsExpanded
-    })
-  }
-
-  groupedLayers() {
-    const groups = []
-    for (let i = 0; i < this.props.layers.length; i++) {
-      const previousLayer = this.props.layers[i-1]
-      const layer = this.props.layers[i]
-      if(previousLayer && layerPrefix(previousLayer.id) == layerPrefix(layer.id)) {
-        const lastGroup = groups[groups.length - 1]
-        lastGroup.push(layer)
-      } else {
-        groups.push([layer])
-      }
-    }
-    return groups
-  }
-
-  toggleLayerGroup(groupPrefix, idx) {
-    const lookupKey = [groupPrefix, idx].join('-')
-    const newGroups = { ...this.state.collapsedGroups }
-    if(lookupKey in this.state.collapsedGroups) {
-      newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
-    } else {
-      newGroups[lookupKey] = false
-    }
-    this.setState({
-      collapsedGroups: newGroups
-    })
-  }
-
-  isCollapsed(groupPrefix, idx) {
-    const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
-    return collapsed === undefined ? true : collapsed
-  }
-
-  render() {
-
-    const listItems = []
-    let idx = 0
-    this.groupedLayers().forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
-      if(layers.length > 1) {
-        const grp = <LayerListGroup
-          data-wd-key={[groupPrefix, idx].join('-')}
-          key={[groupPrefix, idx].join('-')}
-          title={groupPrefix}
-          isActive={!this.isCollapsed(groupPrefix, idx) || idx === this.props.selectedLayerIndex}
-          onActiveToggle={this.toggleLayerGroup.bind(this, groupPrefix, idx)}
-        />
-        listItems.push(grp)
-      }
-
-      layers.forEach((layer, idxInGroup) => {
-        const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
-
-        const listItem = <LayerListItem
-          className={classnames({
-            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx) && idx !== this.props.selectedLayerIndex,
-            'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
-          })}
-          index={idx}
-          key={layer.id}
-          layerId={layer.id}
-          layerType={layer.type}
-          visibility={(layer.layout || {}).visibility}
-          isSelected={idx === this.props.selectedLayerIndex}
-          onLayerSelect={this.props.onLayerSelect}
-          onLayerDestroy={this.onLayerDestroy.bind(this)}
-          onLayerCopy={this.onLayerCopy.bind(this)}
-          onLayerVisibilityToggle={this.onLayerVisibilityToggle.bind(this)}
-        />
-        listItems.push(listItem)
-        idx += 1
-      })
-    })
-
-    return <div className="maputnik-layer-list">
-      <AddModal
-          layers={this.props.layers}
-          sources={this.props.sources}
-          isOpen={this.state.isOpen.add}
-          onOpenToggle={this.toggleModal.bind(this, 'add')}
-          onLayersChange={this.props.onLayersChange}
-      />
-      <header className="maputnik-layer-list-header">
-        <span className="maputnik-layer-list-header-title">Layers</span>
-        <span className="maputnik-space" />
-        <div className="maputnik-default-property">
-          <div className="maputnik-multibutton">
-            <a 
-              onClick={this.toggleLayers.bind(this)}
-              className="maputnik-button">
-              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
-            </a>
-          </div>
-        </div>
-        <div className="maputnik-default-property">
-          <div className="maputnik-multibutton">
-            <a
-              onClick={this.toggleModal.bind(this, 'add')}
-              data-wd-key="layer-list:add-layer"
-              className="maputnik-button maputnik-button-selected">
-             Add Layer
-            </a>
-          </div>
-        </div>
-      </header>
-      <ul className="maputnik-layer-list-container">
-        {listItems}
-      </ul>
-    </div>
-  }
-}
-
-export default class LayerList extends React.Component {
-  static propTypes = {...layerListPropTypes}
-
-  onSortEnd(move) {
-    const { oldIndex, newIndex } = move
-    if(oldIndex === newIndex) return
-    let layers = this.props.layers.slice(0)
-    layers = arrayMove(layers, oldIndex, newIndex)
-    this.props.onLayersChange(layers)
-  }
-
-  render() {
-    return <LayerListContainer
-      {...this.props}
-      onSortEnd={this.onSortEnd.bind(this)}
-      useDragHandle={true}
-    />
-  }
-}

src/components/layers/LayerListGroup.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Collapser from './Collapser'
-
-export default class LayerListGroup extends React.Component {
-  static propTypes = {
-    title: PropTypes.string.isRequired,
-    "data-wd-key": PropTypes.string,
-    isActive: PropTypes.bool.isRequired,
-    onActiveToggle: PropTypes.func.isRequired
-  }
-
-  render() {
-    return <li className="maputnik-layer-list-group">
-      <div className="maputnik-layer-list-group-header"
-        data-wd-key={"layer-list-group:"+this.props["data-wd-key"]}
-        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
-      >
-        <span className="maputnik-layer-list-group-title">{this.props.title}</span>
-        <span className="maputnik-space" />
-        <Collapser
-          style={{ height: 14, width: 14 }}
-          isCollapsed={this.props.isActive}
-        />
-      </div>
-    </li>
-  }
-}

src/components/layers/LayerListItem.jsx

@@ -1,124 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Color from 'color'
-import classnames from 'classnames'
-
-import CopyIcon from 'react-icons/lib/md/content-copy'
-import VisibilityIcon from 'react-icons/lib/md/visibility'
-import VisibilityOffIcon from 'react-icons/lib/md/visibility-off'
-import DeleteIcon from 'react-icons/lib/md/delete'
-
-import LayerIcon from '../icons/LayerIcon'
-import LayerEditor from './LayerEditor'
-import {SortableElement, SortableHandle} from 'react-sortable-hoc'
-
-@SortableHandle
-class LayerTypeDragHandle extends React.Component {
-  static propTypes = LayerIcon.propTypes
-
-  render() {
-    return <LayerIcon
-      {...this.props}
-      style={{
-        cursor: 'move',
-        width: 14,
-        height: 14,
-        paddingRight: 3,
-      }}
-    />
-  }
-}
-
-class IconAction extends React.Component {
-  static propTypes = {
-    action: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-    wdKey: PropTypes.string
-  }
-
-  renderIcon() {
-    switch(this.props.action) {
-      case 'copy': return <CopyIcon />
-      case 'show': return <VisibilityIcon />
-      case 'hide': return <VisibilityOffIcon />
-      case 'delete': return <DeleteIcon />
-    }
-  }
-
-  render() {
-    return <a
-      className="maputnik-layer-list-icon-action"
-      data-wd-key={this.props.wdKey}
-      onClick={this.props.onClick}
-    >
-      {this.renderIcon()}
-    </a>
-  }
-}
-
-@SortableElement
-class LayerListItem extends React.Component {
-  static propTypes = {
-    layerId: PropTypes.string.isRequired,
-    layerType: PropTypes.string.isRequired,
-    isSelected: PropTypes.bool,
-    visibility: PropTypes.string,
-    className: PropTypes.string,
-
-    onLayerSelect: PropTypes.func.isRequired,
-    onLayerCopy: PropTypes.func,
-    onLayerDestroy: PropTypes.func,
-    onLayerVisibilityToggle: PropTypes.func,
-  }
-
-  static defaultProps = {
-    isSelected: false,
-    visibility: 'visible',
-    onLayerCopy: () => {},
-    onLayerDestroy: () => {},
-    onLayerVisibilityToggle: () => {},
-  }
-
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
-  render() {
-    return <li
-      key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerId)}
-      data-wd-key={"layer-list-item:"+this.props.layerId}
-      className={classnames({
-        "maputnik-layer-list-item": true,
-        "maputnik-layer-list-item-selected": this.props.isSelected,
-        [this.props.className]: true,
-      })}>
-        <LayerTypeDragHandle type={this.props.layerType} />
-        <span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
-        <span style={{flexGrow: 1}} />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
-          action={'delete'}
-          onClick={e => this.props.onLayerDestroy(this.props.layerId)}
-        />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
-          action={'copy'}
-          onClick={e => this.props.onLayerCopy(this.props.layerId)}
-        />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'hide' : 'show'}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
-        />
-    </li>
-  }
-}
-
-export default LayerListItem;

src/components/layers/LayerSourceBlock.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import AutocompleteInput from '../inputs/AutocompleteInput'
-
-class LayerSourceBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    wdKey: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceIds: PropTypes.array,
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    sourceIds: [],
-  }
-
-  render() {
-    return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
-      data-wd-key={this.props.wdKey}
-    >
-      <AutocompleteInput
-        value={this.props.value}
-        onChange={this.props.onChange}
-        options={this.props.sourceIds.map(src => [src, src])}
-      />
-    </InputBlock>
-  }
-}
-
-export default LayerSourceBlock

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import AutocompleteInput from '../inputs/AutocompleteInput'
-
-class LayerSourceLayer extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceLayerIds: PropTypes.array,
-    isFixed: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    sourceLayerIds: [],
-    isFixed: false
-  }
-
-  render() {
-    return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
-      data-wd-key="layer-source-layer"
-    >
-      <AutocompleteInput
-        keepMenuWithinWindowBounds={!!this.props.isFixed}
-        value={this.props.value}
-        onChange={this.props.onChange}
-        options={this.props.sourceLayerIds.map(l => [l, l])}
-      />
-    </InputBlock>
-  }
-}
-
-export default LayerSourceLayer

src/components/layers/LayerTypeBlock.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import SelectInput from '../inputs/SelectInput'
-
-class LayerTypeBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    wdKey: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
-      data-wd-key={this.props.wdKey}
-    >
-      <SelectInput
-        options={[
-          ['background', 'Background'],
-          ['fill', 'Fill'],
-          ['line', 'Line'],
-          ['symbol', 'Symbol'],
-          ['raster', 'Raster'],
-          ['circle', 'Circle'],
-          ['fill-extrusion', 'Fill Extrusion'],
-          ['hillshade', 'Hillshade'],
-          ['heatmap', 'Heatmap'],
-        ]}
-        onChange={this.props.onChange}
-        value={this.props.value}
-      />
-    </InputBlock>
-  }
-}
-
-export default LayerTypeBlock

src/components/layers/MaxZoomBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import NumberInput from '../inputs/NumberInput'
-
-class MaxZoomBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
-      data-wd-key="max-zoom"
-    >
-      <NumberInput
-        value={this.props.value}
-        onChange={this.props.onChange}
-        min={styleSpec.latest.layer.maxzoom.minimum}
-        max={styleSpec.latest.layer.maxzoom.maximum}
-        default={styleSpec.latest.layer.maxzoom.maximum}
-      />
-    </InputBlock>
-  }
-}
-
-export default MaxZoomBlock

src/components/layers/MinZoomBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import NumberInput from '../inputs/NumberInput'
-
-class MinZoomBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  render() {
-    return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
-      data-wd-key="min-zoom"
-    >
-      <NumberInput
-        value={this.props.value}
-        onChange={this.props.onChange}
-        min={styleSpec.latest.layer.minzoom.minimum}
-        max={styleSpec.latest.layer.minzoom.maximum}
-        default={styleSpec.latest.layer.minzoom.minimum}
-      />
-    </InputBlock>
-  }
-}
-
-export default MinZoomBlock

src/components/map/FeatureLayerPopup.jsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import LayerIcon from '../icons/LayerIcon'
-
-function groupFeaturesBySourceLayer(features) {
-  const sources = {}
-
-  let returnedFeatures = {};
-
-  features.forEach(feature => {
-    if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
-      returnedFeatures[feature.layer.id]++
-      
-      const featureObject = sources[feature.layer['source-layer']].find(f => f.layer.id === feature.layer.id)
-
-      featureObject.counter = returnedFeatures[feature.layer.id]
-    } else {
-      sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
-      sources[feature.layer['source-layer']].push(feature)
-
-      returnedFeatures[feature.layer.id] = 1
-    }
-  })
-
-  return sources
-}
-
-class FeatureLayerPopup extends React.Component {
-  static propTypes = {
-    onLayerSelect: PropTypes.func.isRequired,
-    features: PropTypes.array
-  }
-
-  render() {
-    const sources = groupFeaturesBySourceLayer(this.props.features)
-
-    const items = Object.keys(sources).map(vectorLayerId => {
-      const layers = sources[vectorLayerId].map((feature, idx) => {
-        return <label
-          key={idx}
-          className="maputnik-popup-layer"
-          onClick={() => {
-            this.props.onLayerSelect(feature.layer.id)
-          }}
-        >
-          <LayerIcon type={feature.layer.type} style={{
-            width: 14,
-            height: 14,
-            paddingRight: 3
-          }}/>
-          {feature.layer.id}
-          {feature.counter && <span> × {feature.counter}</span>}
-        </label>
-      })
-      return <div key={vectorLayerId}>
-        <div className="maputnik-popup-layer-id">{vectorLayerId}</div>
-        {layers}
-      </div>
-    })
-
-    return <div className="maputnik-feature-layer-popup">
-      {items}
-    </div>
-  }
-}
-
-
-export default FeatureLayerPopup

src/components/map/FeaturePropertyPopup.jsx

@@ -1,71 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-
-function displayValue(value) {
-  if (typeof value === 'undefined' || value === null) return value;
-  if (value instanceof Date) return value.toLocaleString();
-  if (typeof value === 'object' ||
-          typeof value === 'number' ||
-          typeof value === 'string') return value.toString();
-  return value;
-}
-
-function renderProperties(feature) {
-  return Object.keys(feature.properties).map(propertyName => {
-    const property = feature.properties[propertyName]
-    return <InputBlock key={propertyName} label={propertyName}>
-      <StringInput value={displayValue(property)} style={{backgroundColor: 'transparent'}}/>
-    </InputBlock>
-  })
-}
-
-function renderFeature(feature) {
-  return <div key={feature.id}>
-    <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
-    <InputBlock key={"property-type"} label={"$type"}>
-      <StringInput value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
-    </InputBlock>
-    {renderProperties(feature)}
-  </div>
-}
-
-function removeDuplicatedFeatures(features) {
-  let uniqueFeatures = [];
-
-  features.forEach(feature => {
-    const featureIndex = uniqueFeatures.findIndex(feature2 => {
-      return feature.layer['source-layer'] === feature2.layer['source-layer'] 
-        && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
-    })
-
-    if(featureIndex === -1) {
-      uniqueFeatures.push(feature)
-    } else {
-      if(uniqueFeatures[featureIndex].hasOwnProperty('counter')) {
-        uniqueFeatures[featureIndex].inspectModeCounter++
-      } else {
-        uniqueFeatures[featureIndex].inspectModeCounter = 2
-      }
-    }
-  })
-
-  return uniqueFeatures
-}
-
-class FeaturePropertyPopup extends React.Component {
-  static propTypes = {
-    features: PropTypes.array
-  }
-
-  render() {
-    const features = removeDuplicatedFeatures(this.props.features)
-    return <div className="maputnik-feature-property-popup">
-      {features.map(renderFeature)}
-    </div>
-  }
-}
-
-
-export default FeaturePropertyPopup

src/components/map/MapboxGlMap.jsx

@@ -1,159 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import ReactDOM from 'react-dom'
-import MapboxGl from 'mapbox-gl'
-import MapboxInspect from 'mapbox-gl-inspect'
-import FeatureLayerPopup from './FeatureLayerPopup'
-import FeaturePropertyPopup from './FeaturePropertyPopup'
-import style from '../../libs/style.js'
-import tokens from '../../config/tokens.json'
-import colors from 'mapbox-gl-inspect/lib/colors'
-import Color from 'color'
-import ZoomControl from '../../libs/zoomcontrol'
-import { colorHighlightedLayer } from '../../libs/highlight'
-import 'mapbox-gl/dist/mapbox-gl.css'
-import '../../mapboxgl.css'
-import '../../libs/mapbox-rtl'
-
-function renderPropertyPopup(features) {
-  var mountNode = document.createElement('div');
-  ReactDOM.render(<FeaturePropertyPopup features={features} />, mountNode)
-  return mountNode.innerHTML;
-}
-
-function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
-  const backgroundLayer = {
-    "id": "background",
-    "type": "background",
-    "paint": {
-      "background-color": '#1c1f24',
-    }
-  }
-
-  const layer = colorHighlightedLayer(highlightedLayer)
-  if(layer) {
-    coloredLayers.push(layer)
-  }
-
-  const sources = {}
-  Object.keys(originalMapStyle.sources).forEach(sourceId => {
-    const source = originalMapStyle.sources[sourceId]
-    if(source.type !== 'raster' && source.type !== 'raster-dem') {
-      sources[sourceId] = source
-    }
-  })
-
-  const inspectStyle = {
-    ...originalMapStyle,
-    sources: sources,
-    layers: [backgroundLayer].concat(coloredLayers)
-  }
-  return inspectStyle
-}
-
-export default class MapboxGlMap extends React.Component {
-  static propTypes = {
-    onDataChange: PropTypes.func,
-    onLayerSelect: PropTypes.func.isRequired,
-    mapStyle: PropTypes.object.isRequired,
-    inspectModeEnabled: PropTypes.bool.isRequired,
-    highlightedLayer: PropTypes.object,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {},
-    onDataChange: () => {},
-    onLayerSelect: () => {},
-    mapboxAccessToken: tokens.mapbox,
-  }
-
-  constructor(props) {
-    super(props)
-    MapboxGl.accessToken = tokens.mapbox
-    this.state = {
-      map: null,
-      inspect: null,
-      isPopupOpen: false,
-      popupX: 0,
-      popupY: 0,
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if(!this.state.map) return
-    const metadata = nextProps.mapStyle.metadata || {}
-    MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox
-
-    if(!nextProps.inspectModeEnabled) {
-      //Mapbox GL now does diffing natively so we don't need to calculate
-      //the necessary operations ourselves!
-      this.state.map.setStyle(nextProps.mapStyle, { diff: true})
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    if(this.props.inspectModeEnabled !== prevProps.inspectModeEnabled) {
-      this.state.inspect.toggleInspector()
-    }
-    if(this.props.inspectModeEnabled) {
-      this.state.inspect.render()
-    }
-  }
-
-  componentDidMount() {
-    const map = new MapboxGl.Map({
-      container: this.container,
-      style: this.props.mapStyle,
-      hash: true,
-    })
-
-    const zoom = new ZoomControl;
-    map.addControl(zoom, 'top-right');
-
-    const nav = new MapboxGl.NavigationControl();
-    map.addControl(nav, 'top-right');
-
-    const inspect = new MapboxInspect({
-      popup: new MapboxGl.Popup({
-        closeOnClick: false
-      }),
-      showMapPopup: true,
-      showMapPopupOnHover: false,
-      showInspectMapPopupOnHover: true,
-      showInspectButton: false,
-      blockHoverPopupOnClick: true,
-      assignLayerColor: (layerId, alpha) => {
-        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
-      },
-      buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
-      renderPopup: features => {
-        if(this.props.inspectModeEnabled) {
-          return renderPropertyPopup(features)
-        } else {
-          var mountNode = document.createElement('div');
-          ReactDOM.render(<FeatureLayerPopup features={features} onLayerSelect={this.props.onLayerSelect} />, mountNode)
-          return mountNode
-        }
-      }
-    })
-    map.addControl(inspect)
-
-    map.on("style.load", () => {
-      this.setState({ map, inspect });
-    })
-
-    map.on("data", e => {
-      if(e.dataType !== 'tile') return
-      this.props.onDataChange({
-        map: this.state.map
-      })
-    })
-  }
-
-  render() {
-    return <div
-      className="maputnik-map"
-      ref={x => this.container = x}
-    ></div>
-  }
-}

src/components/map/OpenLayers3Map.jsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import style from '../../libs/style.js'
-import isEqual from 'lodash.isequal'
-import { loadJSON } from '../../libs/urlopen'
-import 'ol/ol.css'
-
-
-class OpenLayers3Map extends React.Component {
-  static propTypes = {
-    onDataChange: PropTypes.func,
-    mapStyle: PropTypes.object.isRequired,
-    accessToken: PropTypes.string,
-    style: PropTypes.object,
-  }
-
-  static defaultProps = {
-    onMapLoaded: () => {},
-    onDataChange: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.map = null
-  }
-
-  updateStyle(newMapStyle) {
-    const olms = require('ol-mapbox-style');
-    const styleFunc = olms.apply(this.map, newMapStyle)
-  }
-
-  componentWillReceiveProps(nextProps) {
-    require.ensure(["ol", "ol-mapbox-style"], () => {
-      if(!this.map) return
-      this.updateStyle(nextProps.mapStyle)
-    })
-  }
-
-  componentDidMount() {
-    //Load OpenLayers dynamically once we need it
-    //TODO: Make this more convenient
-    require.ensure(["ol", "ol/map", "ol/view", "ol/control/zoom", "ol-mapbox-style"], ()=> {
-      console.log('Loaded OpenLayers3 renderer')
-
-      const olMap = require('ol/map').default
-      const olView = require('ol/view').default
-      const olZoom = require('ol/control/zoom').default
-
-      const map = new olMap({
-        target: this.container,
-        layers: [],
-        view: new olView({
-          zoom: 2,
-          center: [52.5, -78.4]
-        })
-      })
-      map.addControl(new olZoom())
-      this.map = map
-      this.updateStyle(this.props.mapStyle)
-    })
-  }
-
-  render() {
-    return <div
-      ref={x => this.container = x}
-      style={{
-        position: "fixed",
-        top: 40,
-        right: 0,
-        bottom: 0,
-        height: 'calc(100% - 40px)',
-        width: "75%",
-        backgroundColor: '#fff',
-        ...this.props.style,
-      }}>
-    </div>
-  }
-}
-
-export default OpenLayers3Map

src/components/modals/AddModal.jsx

@@ -1,164 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Button from '../Button'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import Modal from './Modal'
-
-import LayerTypeBlock from '../layers/LayerTypeBlock'
-import LayerIdBlock from '../layers/LayerIdBlock'
-import LayerSourceBlock from '../layers/LayerSourceBlock'
-import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock'
-
-class AddModal extends React.Component {
-  static propTypes = {
-    layers: PropTypes.array.isRequired,
-    onLayersChange: PropTypes.func.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-
-    // A dict of source id's and the available source layers
-    sources: PropTypes.object.isRequired,
-  }
-
-  addLayer() {
-    const changedLayers = this.props.layers.slice(0)
-    const layer = {
-      id: this.state.id,
-      type: this.state.type,
-    }
-
-    if(this.state.type !== 'background') {
-      layer.source = this.state.source
-      if(this.state.type !== 'raster' && this.state['source-layer']) {
-        layer['source-layer'] = this.state['source-layer']
-      }
-    }
-
-    changedLayers.push(layer)
-
-    this.props.onLayersChange(changedLayers)
-    this.props.onOpenToggle(false)
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      type: 'fill',
-      id: '',
-    }
-
-    if(props.sources.length > 0) {
-      this.state.source = Object.keys(this.props.sources)[0]
-      this.state['source-layer'] = this.props.sources[this.state.source][0]
-    }
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-    // Check if source is valid for new type
-    const oldType = this.state.type;
-    const newType = nextState.type;
-
-    const availableSourcesOld = this.getSources(oldType);
-    const availableSourcesNew = this.getSources(newType);
-
-    if(
-      // Type has changed
-      oldType !== newType
-      && this.state.source !== ""
-      // Was a valid source previously
-      && availableSourcesOld.indexOf(this.state.source) > -1
-      // And is not a valid source now
-      && availableSourcesNew.indexOf(nextState.source) < 0
-    ) {
-      // Clear the source
-      this.setState({
-        source: ""
-      });
-    }
-  }
-
-  getLayersForSource(source) {
-    const sourceObj = this.props.sources[source] || {};
-    return sourceObj.layers || [];
-  }
-
-  getSources(type) {
-    const sources = [];
-
-    const types = {
-      vector: [
-        "fill",
-        "line",
-        "symbol",
-        "circle",
-        "fill-extrusion"
-      ],
-      raster: [
-        "raster"
-      ]
-    }
-
-    for(let [key, val] of Object.entries(this.props.sources)) {
-      if(types[val.type] && types[val.type].indexOf(type) > -1) {
-        sources.push(key);
-      }
-    }
-
-    return sources;
-  }
-
-
-  render() {
-    const sources = this.getSources(this.state.type);
-    const layers = this.getLayersForSource(this.state.source);
-
-    return <Modal
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title={'Add Layer'}
-      data-wd-key="modal:add-layer"
-    >
-      <div className="maputnik-add-layer">
-      <LayerIdBlock
-        value={this.state.id}
-        wdKey="add-layer.layer-id"
-        onChange={v => {
-          this.setState({ id: v })
-        }}
-      />
-      <LayerTypeBlock
-        value={this.state.type}
-        wdKey="add-layer.layer-type"
-        onChange={v => this.setState({ type: v })}
-      />
-      {this.state.type !== 'background' &&
-      <LayerSourceBlock
-        sourceIds={sources}
-        wdKey="add-layer.layer-source-block"
-        value={this.state.source}
-        onChange={v => this.setState({ source: v })}
-      />
-      }
-      {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
-      <LayerSourceLayerBlock
-        isFixed={true}
-        sourceLayerIds={layers}
-        value={this.state['source-layer']}
-        onChange={v => this.setState({ 'source-layer': v })}
-      />
-      }
-      <Button
-        className="maputnik-add-layer-button"
-        onClick={this.addLayer.bind(this)}
-        data-wd-key="add-layer"
-      >
-        Add Layer
-      </Button>
-      </div>
-    </Modal>
-  }
-}
-
-export default AddModal

src/components/modals/ExportModal.jsx

@@ -1,269 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { saveAs } from 'file-saver'
-
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import CheckboxInput from '../inputs/CheckboxInput'
-import Button from '../Button'
-import Modal from './Modal'
-import MdFileDownload from 'react-icons/lib/md/file-download'
-import TiClipboard from 'react-icons/lib/ti/clipboard'
-import style from '../../libs/style.js'
-import GitHub from 'github-api'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
-
-
-class Gist extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      preview: false,
-      public: false,
-      saving: false,
-      latestGist: null,
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      ...this.state,
-      preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
-    })
-  }
-
-  onSave() {
-    this.setState({
-      ...this.state,
-      saving: true
-    });
-
-    const preview = this.state.preview;
-    
-    const mapboxToken = (this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token'];
-
-    const mapStyleStr = preview ?
-        styleSpec.format(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
-        styleSpec.format(stripAccessTokens(this.props.mapStyle));
-    const styleTitle = this.props.mapStyle.name || 'Style';
-    const htmlStr = `
-  <!DOCTYPE html>
-  <html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>`+styleTitle+` Preview</title>
-    <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" />
-    <script src="https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>
-    <style>
-      body { margin:0; padding:0; }
-      #map { position:absolute; top:0; bottom:0; width:100%; }
-    </style>
-  </head>
-  <body>
-    <div id='map'></div>
-    <script>
-        mapboxgl.accessToken = '${mapboxToken}';
-        var map = new mapboxgl.Map({
-          container: 'map',
-          style: 'style.json',
-          attributionControl: true,
-          hash: true
-        });
-        map.addControl(new mapboxgl.NavigationControl());
-    </script>
-  </body>
-  </html>
-`
-    const files = {
-      "style.json": {
-        content: mapStyleStr
-      }
-    }
-    if(preview) {
-      files["index.html"] = {
-        content: htmlStr
-      }
-    }
-    const gh = new GitHub();
-    let gist = gh.getGist(); // not a gist yet
-    gist.create({
-      public: this.state.public,
-      description: styleTitle,
-      files: files
-    }).then(function({data}) {
-      return gist.read();
-    }).then(function({data}) {
-      this.setState({
-        ...this.state,
-        latestGist: data,
-        saving: false,
-      });
-    }.bind(this));
-  }
-
-  onPreviewChange(value) {
-    this.setState({
-      ...this.state,
-      preview: value
-    })
-  }
-
-  onPublicChange(value) {
-    this.setState({
-      ...this.state,
-      public: value
-    })
-  }
-
-  changeMetadataProperty(property, value) {
-    const changedStyle = {
-      ...this.props.mapStyle,
-      metadata: {
-        ...this.props.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.props.onStyleChanged(changedStyle)
-  }
-
-  renderPreviewLink() {
-    const gist = this.state.latestGist;
-    const user = gist.user || 'anonymous';
-    const preview = !!gist.files['index.html'];
-    if(preview) {
-      return <span><a target="_blank" rel="noopener noreferrer" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
-    }
-    return null;
-  }
-
-  renderLatestGist() {
-    const gist = this.state.latestGist;
-    const saving = this.state.saving;
-    if(saving) {
-      return <p>Saving...</p>
-    } else if(gist) {
-      const user = gist.user || 'anonymous';
-      const rawGistLink = "https://gist.githubusercontent.com/" + user + "/" + gist.id + "/raw/" + gist.history[0].version + "/style.json"
-      const maputnikStyleLink = "https://maputnik.github.io/editor/?style=" + rawGistLink
-      return <div className="maputnik-render-gist">
-        <p>
-          Latest saved gist:{' '}
-          {this.renderPreviewLink(this)}
-          <a target="_blank" rel="noopener noreferrer" href={"https://gist.github.com/" + user + "/" + gist.id}>Source</a>
-        </p>
-        <p>
-          <CopyToClipboard text={maputnikStyleLink}>
-            <span>Share this style: <Button><TiClipboard size={18} /></Button></span>
-          </CopyToClipboard>
-          <StringInput value={maputnikStyleLink} />
-        </p>
-      </div>
-    }
-  }
-
-  render() {
-    return <div className="maputnik-export-gist">
-      <Button onClick={this.onSave.bind(this)}>
-        <MdFileDownload />
-        Save to Gist (anonymous)
-      </Button>
-      <div className="maputnik-modal-sub-section">
-        <CheckboxInput
-          value={this.state.public}
-          name='gist-style-public'
-          onChange={this.onPublicChange.bind(this)}
-        />
-        <span> Public gist</span>
-      </div>
-      <div className="maputnik-modal-sub-section">
-        <CheckboxInput
-          value={this.state.preview}
-          name='gist-style-preview'
-          onChange={this.onPreviewChange.bind(this)}
-        />
-        <span> Include preview</span>
-      </div>
-      {this.state.preview ?
-          <div>
-            <InputBlock
-                label={"OpenMapTiles Access Token: "}>
-              <StringInput
-                  value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
-                  onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/>
-            </InputBlock>
-            <InputBlock
-                label={"Mapbox Access Token: "}>
-              <StringInput
-                  value={(this.props.mapStyle.metadata || {})['maputnik:mapbox_access_token']}
-                  onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}/>
-            </InputBlock>
-            <a target="_blank" rel="noopener noreferrer" href="https://openmaptiles.com/hosting/">Get your free access token</a>
-          </div>
-      : null}
-      {this.renderLatestGist()}
-    </div>
-  }
-}
-
-function stripAccessTokens(mapStyle) {
-  const changedMetadata = { ...mapStyle.metadata }
-  delete changedMetadata['maputnik:mapbox_access_token']
-  delete changedMetadata['maputnik:openmaptiles_access_token']
-  return {
-    ...mapStyle,
-    metadata: changedMetadata
-  }
-}
-
-class ExportModal extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-  }
-
-  constructor(props) {
-    super(props);
-  }
-
-  downloadStyle() {
-    const blob = new Blob([styleSpec.format(stripAccessTokens(this.props.mapStyle))], {type: "application/json;charset=utf-8"});
-    saveAs(blob, this.props.mapStyle.id + ".json");
-  }
-
-  render() {
-    return <Modal
-      data-wd-key="export-modal"
-      isOpen={this.props.isOpen}
-      onOpenToggle={this.props.onOpenToggle}
-      title={'Export Style'}
-    >
-
-      <div className="maputnik-modal-section">
-        <h4>Download Style</h4>
-        <p>
-          Download a JSON style to your computer.
-        </p>
-        <Button onClick={this.downloadStyle.bind(this)}>
-          <MdFileDownload />
-          Download
-        </Button>
-      </div>
-
-      <div className="maputnik-modal-section">
-        <h4>Save style</h4>
-        <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
-      </div>
-    </Modal>
-  }
-}
-
-export default ExportModal