deploy: c3a35354f7

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,20 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "static-fs",
-    "react-hot-loader/babel",
-    "@babel/plugin-proposal-class-properties"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        ["istanbul", {
-          "exclude": ["node_modules/**", "test/**"]
-        }]
-      ]
-    }
-  }
-}

.circleci/config.yml

@@ -1,103 +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-{{ arch }}-{{ checksum "package.json" }}
-
-    - run: npm install
-
-    - save_cache:
-        paths:
-          - node_modules
-        key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
-
-    - run: mkdir -p /tmp/artifacts/logs
-    - run: npm run build
-    - run: npm run lint-js
-    - run: npm run lint-css
-    - 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-{{ arch }}-{{ checksum "package.json" }}
-
-    - run: npm install
-
-    - save_cache:
-        paths:
-          - node_modules
-        key: v1-dependencies-{{ arch }}-{{ checksum "package.json" }}
-
-    - run: mkdir -p /tmp/artifacts/logs
-    - run: npm run build
-    - run: npm run profiling-build
-    - run: npm run lint-js
-    - run: npm run lint-css
-    - 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-v10:
-    docker:
-      - image: node:10
-      - image: selenium/standalone-chrome:3.141.59
-    working_directory: ~/repo-linux-node-v10
-    steps: *wdio-steps
-  build-linux-node-v12:
-    docker:
-      - image: node:12
-    working_directory: ~/repo-linux-node-v12
-    steps: *build-steps
-  build-linux-node-v13:
-    docker:
-      - image: node:13
-    working_directory: ~/repo-linux-node-v13
-    steps: *build-steps
-  build-osx-node-v10:
-    macos:
-      xcode: "9.0"
-    dependencies:
-      override:
-        - brew install node@10
-    working_directory: ~/repo-osx-node-v10
-    steps: *build-steps
-  build-osx-node-v12:
-    macos:
-      xcode: "9.0"
-    dependencies:
-      override:
-        - brew install node@12
-    working_directory: ~/repo-osx-node-v12
-    steps: *build-steps
-  build-osx-node-v13:
-    macos:
-      xcode: "9.0"
-    dependencies:
-      override:
-        - brew install node@13
-    working_directory: ~/repo-osx-node-v13
-    steps: *build-steps
-
-workflows:
-  version: 2
-  build:
-    jobs:
-      - build-linux-node-v10
-      - build-linux-node-v12
-      - build-linux-node-v13
-      - build-osx-node-v10
-      - build-osx-node-v12
-      - build-osx-node-v13

.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

.github/FUNDING.yml

@@ -1 +0,0 @@
-custom: "https://maputnik.github.io/donate"

.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

.topissuesrc

@@ -1,15 +0,0 @@
-{
-    "labels": {
-        "bug": 5,
-        "maintenance": 3,
-        "mentioned in the 1st survey": 2
-    },
-    "reactions": {
-        "+1": 2,
-        "-1": -1,
-        "laugh": 1,
-        "hooray": 2,
-        "confused": 1,
-        "heart": 2
-    }
-}

Dockerfile

@@ -1,21 +0,0 @@
-FROM node:10-slim
-
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    git \
-    python \
- && rm -rf /var/lib/apt/lists/*
-
-EXPOSE 8888
-
-ENV HOME /maputnik
-RUN mkdir ${HOME}
-
-COPY . ${HOME}/
-
-WORKDIR ${HOME}
-
-RUN npm install -d
-RUN npm run build
-
-WORKDIR ${HOME}/build/build
-CMD python -m SimpleHTTPServer 8888

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,171 +0,0 @@
-# Maputnik
-
-[![Build Status](https://circleci.com/gh/maputnik/editor/tree/master.svg?style=shield)][circleci]
-[![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]
-
-[circleci]:    https://circleci.com/gh/maputnik/editor/tree/master
-[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
-[dm-prod]:     https://david-dm.org/maputnik/editor
-[dm-dev]:      https://david-dm.org/maputnik/editor?type=dev
-[license]:     https://tldrlegal.com/license/mit-license
-
-<img width="200" align="right" alt="Maputnik" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/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: Try out the v1.7.0-beta release at: https://maputnik.github.io/releases/v1.7.0-beta/
-- :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 independence is an OSS map designer.
-
-
-## Donations
-If you or your organisation has seen value from Maputnik, please consider donating at <https://maputnik.github.io/donate>
-
-
-## 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 the [current active LTS Node.js version and above](https://github.com/nodejs/Release#release-schedule).
-
-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
-```
-
-If you want Maputnik to be accessible externally use the [`--host` option](https://webpack.js.org/configuration/dev-server/#devserverhost):
-
-```bash
-# start externally accessible dev server
-npm start -- --host 0.0.0.0 
-```
-
-The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the [webpack-dev-server docs](https://webpack.js.org/configuration/dev-server/):
-
-> 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 source](https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-))
-
-To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your environment.
-
-```
-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 a 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="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/wemap.jpg" />
-</a>
-<a href="http://terranodo.io/">
-  <img width="33%" alt="Terranodo" style="display:inline" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/terranodo.png" />
-</a>
-<a href="https://www.orbiconinformatik.dk/">
-  <img width="32%" alt="Terranodo" style="display:inline" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/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="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/klokantech.png" />
-</a>
-<a href="http://www.geofabrik.de/">
-  <img width="18%" alt="Geofabrik" style="display:inline-block" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/media/sponsors/geofabrik.png" />
-</a>
-<a href="https://www.dreipol.ch/">
-  <img width="18%" alt="Dreipol" style="display:inline-block" src="https://cdn.jsdelivr.net/gh/maputnik/editor@1.5.0/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 an 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,26 +0,0 @@
-image: Visual Studio 2019
-environment:
-  matrix:
-    - nodejs_version: "10"
-    - nodejs_version: "12"
-    - nodejs_version: "13"
-platform:
-  - x86
-  - x64
-install:
-  # https://github.com/appveyor/ci/issues/2921#issuecomment-501016533
-  - ps: |
-      try {
-      Install-Product node $env:nodejs_version $env:platform
-      } catch {
-      echo "Unable to install node $env:nodejs_version, trying update..."
-      Update-NodeJsInstallation (Get-NodeJsLatestBuild $env:nodejs_version) $env:platform
-      }
-  - md public
-  - npm install --global windows-build-tools
-  - npm install
-build_script:
-  - npm run build
-test_script:
-  - npm run lint-js
-  - npm run lint-css

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-DvW-3CJ8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"translation-DvW-3CJ8.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,291 +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 = {
-    //
-    // ====================
-    // Runner Configuration
-    // ====================
-    //
-    // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
-    // on a remote machine).
-    runner: 'local',
-    //
-    // ==================
-    // Specify Test Files
-    // ==================
-    // Define which test specs should run. The pattern is relative to the directory
-    // from which `wdio` was called. Notice that, if you are calling `wdio` from an
-    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
-    // directory is where your package.json resides, so `wdio` will be called from there.
-    //
-    specs: [
-        './test/functional/index.js'
-    ],
-    // Patterns to exclude.
-    exclude: [
-        // 'path/to/excluded/files'
-    ],
-    //
-    // ============
-    // Capabilities
-    // ============
-    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
-    // time. Depending on the number of capabilities, WebdriverIO launches several test
-    // sessions. Within your capabilities you can overwrite the spec and exclude options in
-    // order to group specific specs to a specific capability.
-    //
-    // First, you can define how many instances should be started at the same time. Let's
-    // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
-    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
-    // files and you set maxInstances to 10, all spec files will get tested at the same time
-    // and 30 processes will get spawned. The property handles how many capabilities
-    // from the same test should run tests.
-    //
-    maxInstances: 10,
-    //
-    // If you have trouble getting all important capabilities together, check out the
-    // Sauce Labs platform configurator - a great tool to configure your capabilities:
-    // https://docs.saucelabs.com/reference/platforms-configurator
-    //
-    capabilities: [{
-        // maxInstances can get overwritten per capability. So if you have an in-house Selenium
-        // grid with only 5 firefox instances available you can make sure that not more than
-        // 5 instances get started at a time.
-        maxInstances: 5,
-        //
-        browserName: 'chrome',
-        // If outputDir is provided WebdriverIO can capture driver session logs
-        // it is possible to configure which logTypes to include/exclude.
-        // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
-        // excludeDriverLogs: ['bugreport', 'server'],
-    }],
-    //
-    // ===================
-    // Test Configurations
-    // ===================
-    // Define all options that are relevant for the WebdriverIO instance here
-    //
-    // Level of logging verbosity: trace | debug | info | warn | error | silent
-    logLevel: 'info',
-    //
-    // Set specific log levels per logger
-    // loggers:
-    // - webdriver, webdriverio
-    // - @wdio/applitools-service, @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
-    // - @wdio/mocha-framework, @wdio/jasmine-framework
-    // - @wdio/local-runner, @wdio/lambda-runner
-    // - @wdio/sumologic-reporter
-    // - @wdio/cli, @wdio/config, @wdio/sync, @wdio/utils
-    // Level of logging verbosity: trace | debug | info | warn | error | silent
-    // logLevels: {
-        // webdriver: 'debug',
-        // '@wdio/applitools-service': 'info'
-    // },
-    //
-    // If you only want to run your tests until a specific amount of tests have failed use
-    // bail (default is 0 - don't bail, run all tests).
-    bail: 0,
-    //
-    screenshotPath: SCREENSHOT_PATH,
-    // Note: This is here because @orangemug currently runs Maputnik inside a docker container.
-    hostname: process.env.DOCKER_HOST || "0.0.0.0",
-    // Set a base URL in order to shorten url command calls. If your `url` parameter starts
-    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
-    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
-    // gets prepended directly.
-    baseUrl: 'http://localhost',
-    //
-    // Default timeout for all waitFor* commands.
-    waitforTimeout: 10000,
-    //
-    // Default timeout in milliseconds for request
-    // if Selenium Grid doesn't send response
-    connectionRetryTimeout: 90000,
-    //
-    // Default request retries count
-    connectionRetryCount: 3,
-    //
-    // Test runner services
-    // Services take over a specific job you don't want to take care of. They enhance
-    // your test setup with almost no effort. Unlike plugins, they don't add new
-    // commands. Instead, they hook themselves up into the test process.
-    //
-    // Framework you want to run your specs with.
-    // The following are supported: Mocha, Jasmine, and Cucumber
-    // see also: https://webdriver.io/docs/frameworks.html
-    //
-    // Make sure you have the wdio adapter package for the specific framework installed
-    // before running any tests.
-    framework: 'mocha',
-    //
-    // The number of times to retry the entire specfile when it fails as a whole
-    // specFileRetries: 1,
-    //
-    // Test reporter for stdout.
-    // The only one supported by default is 'dot'
-    // see also: https://webdriver.io/docs/dot-reporter.html
-    reporters: ['spec'],
-    
-    //
-    // Options to be passed to Mocha.
-    // See the full list at http://mochajs.org/
-    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);
-        const serverHost = isDocker() ? "0.0.0.0" : "localhost";
-
-        server = new WebpackDevServer(compiler, {
-          host: serverHost,
-          stats: {
-            colors: true
-          }
-        });
-
-        server.listen(testConfig.port, serverHost, function(err) {
-          if(err) {
-            reject(err);
-          }
-          else {
-            resolve();
-          }
-        });
-      })
-    },
-    onComplete: function(exitCode) {
-      server.close()
-    }
-    //
-    // =====
-    // Hooks
-    // =====
-    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
-    // it and to build services around it. You can either apply a single function or an array of
-    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
-    // resolved to continue.
-    /**
-     * Gets executed once before all workers get launched.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     */
-    // onPrepare: function (config, capabilities) {
-    // },
-    /**
-     * Gets executed just before initialising the webdriver session and test framework. It allows you
-     * to manipulate configurations depending on the capability or spec.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that are to be run
-     */
-    // beforeSession: function (config, capabilities, specs) {
-    // },
-    /**
-     * Gets executed before test execution begins. At this point you can access to all global
-     * variables like `browser`. It is the perfect place to define custom commands.
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that are to be run
-     */
-    // before: function (capabilities, specs) {
-    // },
-    /**
-     * Runs before a WebdriverIO command gets executed.
-     * @param {String} commandName hook command name
-     * @param {Array} args arguments that command would receive
-     */
-    // beforeCommand: function (commandName, args) {
-    // },
-    
-    /**
-     * Hook that gets executed before the suite starts
-     * @param {Object} suite suite details
-     */
-    // beforeSuite: function (suite) {
-    // },
-    /**
-     * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-     * @param {Object} test test details
-     */
-    // beforeTest: function (test) {
-    // },
-    /**
-     * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
-     * beforeEach in Mocha)
-     */
-    // beforeHook: function () {
-    // },
-    /**
-     * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
-     * afterEach in Mocha)
-     */
-    // afterHook: function () {
-    // },
-    /**
-     * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
-     * @param {Object} test test details
-     */
-    // afterTest: function (test) {
-    // },
-    /**
-     * Hook that gets executed after the suite has ended
-     * @param {Object} suite suite details
-     */
-    // afterSuite: function (suite) {
-    // },
-    
-    /**
-     * Runs after a WebdriverIO command gets executed
-     * @param {String} commandName hook command name
-     * @param {Array} args arguments that command would receive
-     * @param {Number} result 0 - command success, 1 - command error
-     * @param {Object} error error object if any
-     */
-    // afterCommand: function (commandName, args, result, error) {
-    // },
-    /**
-     * Gets executed after all tests are done. You still have access to all global variables from
-     * the test.
-     * @param {Number} result 0 - test pass, 1 - test fail
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that ran
-     */
-    // after: function (result, capabilities, specs) {
-    // },
-    /**
-     * Gets executed right after terminating the webdriver session.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that ran
-     */
-    // afterSession: function (config, capabilities, specs) {
-    // },
-    /**
-     * Gets executed after all workers got shut down and the process is about to exit. An error
-     * thrown in the onComplete hook will result in the test run failing.
-     * @param {Object} exitCode 0 - success, 1 - fail
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {<Object>} results object containing test results
-     */
-    // onComplete: function(exitCode, config, capabilities, results) {
-    // },
-    /**
-    * Gets executed when a refresh happens.
-    * @param {String} oldSessionId session ID of the old session
-    * @param {String} newSessionId session ID of the new session
-    */
-    //onReload: function(oldSessionId, newSessionId) {
-    //}
-}

config/webpack.config.js

@@ -1,75 +0,0 @@
-"use strict";
-var webpack = require('webpack');
-var path = require('path');
-var rules = require('./webpack.rules');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-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',
-  mode: 'development',
-  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/
-    ],
-    rules: rules
-  },
-  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 HtmlWebpackInlineSVGPlugin({
-      runPreEmit: true,
-    }),
-    new CopyWebpackPlugin([
-      {
-        from: './src/manifest.json',
-        to: 'manifest.json'
-      }
-    ])
-  ]
-};

config/webpack.production.config.js

@@ -1,66 +0,0 @@
-var webpack = require('webpack');
-var path = require('path');
-var rules = require('./webpack.rules');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
-var HtmlWebpackInlineSVGPlugin = require('html-webpack-inline-svg-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 OUTPATH = artifacts.pathSync("/build");
-
-module.exports = {
-  entry: {
-    app: './src/index.jsx',
-  },
-  output: {
-    path: OUTPATH,
-    filename: '[name].[contenthash].js',
-    chunkFilename: '[contenthash].js'
-  },
-  resolve: {
-    extensions: ['.js', '.jsx']
-  },
-  module: {
-    noParse: [
-      /mapbox-gl\/dist\/mapbox-gl.js/
-    ],
-    rules: rules
-  },
-  node: {
-    fs: "empty",
-    net: 'empty',
-    tls: 'empty'
-  },
-  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
-    new WebpackCleanupPlugin(),
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new HtmlWebpackPlugin({
-      template: './src/template.html',
-      title: 'Maputnik'
-    }),
-    new HtmlWebpackInlineSVGPlugin({
-      runPreEmit: true,
-    }),
-    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',
-    })
-  ]
-};

config/webpack.profiling.config.js

@@ -1,20 +0,0 @@
-const webpackProdConfig = require('./webpack.production.config');
-const artifacts = require("../test/artifacts");
-
-const OUTPATH = artifacts.pathSync("/profiling");
-
-module.exports = {
-  ...webpackProdConfig,
-  output: {
-    ...webpackProdConfig.output,
-    path: OUTPATH,
-  },
-  resolve: {
-    ...webpackProdConfig.resolve,
-    alias: {
-      ...webpackProdConfig.resolve.alias,
-      'react-dom$': 'react-dom/profiling',
-      'scheduler/tracing': 'scheduler/tracing-profiling',
-    }
-  }
-};

config/webpack.rules.js

@@ -1,44 +0,0 @@
-const path = require("path");
-
-module.exports = [
-  {
-    test: /\.jsx?$/,
-    exclude: [
-      path.resolve(__dirname, '../node_modules')
-    ],
-    use: 'babel-loader'
-  },
-  {
-    test: /\.(eot|ttf|woff|woff2)$/,
-    use: 'file-loader?name=fonts/[name].[ext]'
-  },
-  {
-    test: /\.ico$/,
-    use: 'file-loader?name=[name].[ext]'
-  },
-  {
-    test: /\.(gif|jpg|png)$/,
-    use: 'file-loader?name=img/[name].[ext]'
-  },
-  {
-    test: /\.svg$/,
-    use: [
-      'svg-inline-loader'
-    ]
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/,
-    use: [
-      'style-loader',
-      "css-loader",
-      "sass-loader"
-    ]
-  },
-  {
-    test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/,
-    use: [
-      'style-loader',
-      'css-loader'
-    ]
-  }
-];

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-S_bu68PO.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,164 +0,0 @@
-{
-  "name": "maputnik",
-  "version": "1.7.0-beta4",
-  "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",
-    "profiling-build": "webpack --config config/webpack.profiling.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-js": "eslint --ext js --ext jsx src test",
-    "lint-css": "stylelint \"src/styles/*.scss\"",
-    "lint": "npm run lint-js && npm run lint-css"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/maputnik/editor"
-  },
-  "author": "Lukas Martinelli",
-  "license": "MIT",
-  "homepage": "https://github.com/maputnik/editor#readme",
-  "dependencies": {
-    "@babel/runtime": "^7.8.4",
-    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
-    "@mapbox/mapbox-gl-style-spec": "^13.12.0",
-    "@mdi/react": "^1.4.0",
-    "array-move": "^2.2.1",
-    "classnames": "^2.2.6",
-    "codemirror": "^5.52.0",
-    "color": "^3.1.2",
-    "detect-browser": "^5.0.0",
-    "file-saver": "^2.0.2",
-    "json-to-ast": "^2.1.0",
-    "jsonlint": "github:josdejong/jsonlint#85a19d7",
-    "lodash": "^4.17.15",
-    "lodash.capitalize": "^4.2.1",
-    "lodash.clamp": "^4.0.3",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.get": "^4.4.2",
-    "lodash.isequal": "^4.5.0",
-    "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^1.9.1",
-    "mapbox-gl-inspect": "^1.3.1",
-    "maputnik-design": "github:maputnik/design#f7a2b4d",
-    "ol": "^6.3.1",
-    "ol-mapbox-style": "^6.0.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-accessible-accordion": "^3.0.1",
-    "react-aria-menubutton": "^6.3.0",
-    "react-aria-modal": "^4.0.0",
-    "react-autobind": "^1.0.6",
-    "react-autocomplete": "^1.8.1",
-    "react-collapse": "^5.0.1",
-    "react-color": "^2.18.0",
-    "react-dom": "^16.12.0",
-    "react-file-reader-input": "^2.0.0",
-    "react-icon-base": "^2.1.2",
-    "react-icons": "^3.9.0",
-    "react-motion": "^0.5.2",
-    "react-sortable-hoc": "^1.11.0",
-    "reconnecting-websocket": "^4.4.0",
-    "slugify": "^1.3.6",
-    "url": "^0.11.0"
-  },
-  "jshintConfig": {
-    "esversion": 6
-  },
-  "stylelint": {
-    "extends": "stylelint-config-recommended-scss",
-    "rules": {
-      "no-descending-specificity": null,
-      "media-feature-name-no-unknown": [
-        true,
-        {
-          "ignoreMediaFeatureNames": [
-            "prefers-reduced-motion"
-          ]
-        }
-      ]
-    }
-  },
-  "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
-      }
-    },
-    "settings": {
-      "react": {
-        "version": "detect"
-      }
-    }
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.6.2",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.6.3",
-    "@mdi/js": "^5.0.45",
-    "@wdio/cli": "^6.0.5",
-    "@wdio/local-runner": "^6.0.5",
-    "@wdio/mocha-framework": "^6.0.4",
-    "@wdio/selenium-standalone-service": "^6.0.4",
-    "@wdio/spec-reporter": "^6.0.4",
-    "@wdio/sync": "^6.0.1",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-istanbul": "^6.0.0",
-    "babel-plugin-static-fs": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "cors": "^2.8.5",
-    "cross-env": "^7.0.0",
-    "css-loader": "^3.4.2",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.18.3",
-    "express": "^4.17.1",
-    "file-loader": "^6.0.0",
-    "html-webpack-inline-svg-plugin": "^1.3.0",
-    "html-webpack-plugin": "^3.2.0",
-    "is-docker": "^2.0.0",
-    "istanbul": "^0.4.5",
-    "istanbul-lib-coverage": "^3.0.0",
-    "mkdirp": "^1.0.4",
-    "mocha": "^7.0.1",
-    "node-sass": "^4.13.1",
-    "react-hot-loader": "^4.12.19",
-    "sass-loader": "^8.0.2",
-    "selenium-standalone": "^6.17.0",
-    "style-loader": "^1.1.3",
-    "stylelint": "^13.3.0",
-    "stylelint-config-recommended-scss": "^4.2.0",
-    "stylelint-scss": "^3.14.2",
-    "svg-inline-loader": "^0.8.2",
-    "transform-loader": "^0.2.4",
-    "uuid": "^7.0.3",
-    "webdriverio": "^6.0.5",
-    "webpack": "^4.41.6",
-    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
-  }
-}

src/components/App.jsx

@@ -1,848 +0,0 @@
-import autoBind from 'react-autobind';
-import React from 'react'
-import cloneDeep from 'lodash.clonedeep'
-import clamp from 'lodash.clamp'
-import get from 'lodash.get'
-import {unset} from 'lodash'
-import arrayMove from 'array-move'
-import url from 'url'
-
-import MapboxGlMap from './map/MapboxGlMap'
-import OpenLayersMap from './map/OpenLayersMap'
-import LayerList from './layers/LayerList'
-import LayerEditor from './layers/LayerEditor'
-import Toolbar from './Toolbar'
-import AppLayout from './AppLayout'
-import MessagePanel from './MessagePanel'
-
-import SettingsModal from './modals/SettingsModal'
-import ExportModal from './modals/ExportModal'
-import SourcesModal from './modals/SourcesModal'
-import OpenModal from './modals/OpenModal'
-import ShortcutsModal from './modals/ShortcutsModal'
-import SurveyModal from './modals/SurveyModal'
-import DebugModal from './modals/DebugModal'
-
-import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import {latest, validate} from '@mapbox/mapbox-gl-style-spec'
-import style from '../libs/style'
-import { initialStyleUrl, loadStyleUrl, removeStyleQuerystring } from '../libs/urlopen'
-import { undoMessages, redoMessages } from '../libs/diffmessage'
-import { 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 queryUtil from '../libs/query-util'
-import {formatLayerId} from './util/format';
-
-import MapboxGl from 'mapbox-gl'
-
-
-// Similar functionality as <https://github.com/mapbox/mapbox-gl-js/blob/7e30aadf5177486c2cfa14fe1790c60e217b5e56/src/util/mapbox.js>
-function normalizeSourceURL (url, apiToken="") {
-  const matches = url.match(/^mapbox:\/\/(.*)/);
-  if (matches) {
-    // mapbox://mapbox.mapbox-streets-v7
-    return `https://api.mapbox.com/v4/${matches[1]}.json?secure&access_token=${apiToken}`
-  }
-  else {
-    return url;
-  }
-}
-
-function setFetchAccessToken(url, mapStyle) {
-  const matchesTilehosting = url.match(/\.tilehosting\.com/);
-  const matchesMaptiler = url.match(/\.maptiler\.com/);
-  const matchesThunderforest = url.match(/\.thunderforest\.com/);
-  if (matchesTilehosting || matchesMaptiler) {
-    const accessToken = style.getAccessToken("openmaptiles", mapStyle, {allowFallback: true})
-    if (accessToken) {
-      return url.replace('{key}', accessToken)
-    }
-  }
-  else if (matchesThunderforest) {
-    const accessToken = style.getAccessToken("thunderforest", mapStyle, {allowFallback: true})
-    if (accessToken) {
-      return url.replace('{key}', accessToken)
-    }
-  }
-  else {
-    return url;
-  }
-}
-
-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)
-    autoBind(this);
-
-    this.revisionStore = new RevisionStore()
-    const params = new URLSearchParams(window.location.search.substring(1))
-    let port = params.get("localport")
-    if (port == null && (window.location.port != 80 && window.location.port != 443)) {
-      port = window.location.port
-    }
-    this.styleStore = new ApiStyleStore({
-      onLocalStyleChange: mapStyle => this.onStyleChanged(mapStyle, {save: false}),
-      port: port,
-      host: params.get("localhost")
-    })
-
-
-    const shortcuts = [
-      {
-        key: "?",
-        handler: () => {
-          this.toggleModal("shortcuts");
-        }
-      },
-      {
-        key: "o",
-        handler: () => {
-          this.toggleModal("open");
-        }
-      },
-      {
-        key: "e",
-        handler: () => {
-          this.toggleModal("export");
-        }
-      },
-      {
-        key: "d",
-        handler: () => {
-          this.toggleModal("sources");
-        }
-      },
-      {
-        key: "s",
-        handler: () => {
-          this.toggleModal("settings");
-        }
-      },
-      {
-        key: "i",
-        handler: () => {
-          this.setMapState(
-            this.state.mapState === "map" ? "inspect" : "map"
-          );
-        }
-      },
-      {
-        key: "m",
-        handler: () => {
-          document.querySelector(".mapboxgl-canvas").focus();
-        }
-      },
-      {
-        key: "!",
-        handler: () => {
-          this.toggleModal("debug");
-        }
-      },
-    ]
-
-    document.body.addEventListener("keyup", (e) => {
-      if(e.key === "Escape") {
-        e.target.blur();
-        document.body.focus();
-      }
-      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
-        const shortcut = shortcuts.find((shortcut) => {
-          return (shortcut.key === e.key)
-        })
-
-        if(shortcut) {
-          this.setModal("shortcuts", false);
-          shortcut.handler(e);
-        }
-      }
-    })
-
-    const styleUrl = initialStyleUrl()
-    if(styleUrl && window.confirm("Load style from URL: " + styleUrl + " and discard current changes?")) {
-      this.styleStore = new StyleStore()
-      loadStyleUrl(styleUrl, mapStyle => this.onStyleChanged(mapStyle))
-      removeStyleQuerystring()
-    } else {
-      if(styleUrl) {
-        removeStyleQuerystring()
-      }
-      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);
-    }
-
-    const queryObj = url.parse(window.location.href, true).query;
-
-    this.state = {
-      errors: [],
-      infos: [],
-      mapStyle: style.emptyStyle,
-      selectedLayerIndex: 0,
-      sources: {},
-      vectorLayers: {},
-      mapState: "map",
-      spec: latest,
-      mapView: {
-        zoom: 0,
-        center: {
-          lng: 0,
-          lat: 0,
-        },
-      },
-      isOpen: {
-        settings: false,
-        sources: false,
-        open: false,
-        shortcuts: false,
-        export: false,
-        // TODO: Disabled for now, this should be opened on the Nth visit to the editor
-        survey: false,
-        debug: false,
-      },
-      mapboxGlDebugOptions: {
-        showTileBoundaries: false,
-        showCollisionBoxes: false,
-        showOverdrawInspector: false,
-      },
-      openlayersDebugOptions: {
-        debugToolbox: false,
-      },
-    }
-
-    this.layerWatcher = new LayerWatcher({
-      onVectorLayersChange: v => this.setState({ vectorLayers: v })
-    })
-  }
-
-  handleKeyPress = (e) => {
-    if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
-      if(e.metaKey && e.shiftKey && e.keyCode === 90) {
-        e.preventDefault();
-        this.onRedo(e);
-      }
-      else if(e.metaKey && e.keyCode === 90) {
-        e.preventDefault();
-        this.onUndo(e);
-      }
-    }
-    else {
-      if(e.ctrlKey && e.keyCode === 90) {
-        e.preventDefault();
-        this.onUndo(e);
-      }
-      else if(e.ctrlKey && e.keyCode === 89) {
-        e.preventDefault();
-        this.onRedo(e);
-      }
-    }
-  }
-
-  componentDidMount() {
-    window.addEventListener("keydown", this.handleKeyPress);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("keydown", this.handleKeyPress);
-  }
-
-  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)})
-    })
-  }
-
-  onChangeMetadataProperty = (property, value) => {
-    // If we're changing renderer reset the map state.
-    if (
-      property === 'maputnik:renderer' &&
-      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mbgljs')
-    ) {
-      this.setState({
-        mapState: 'map'
-      });
-    }
-
-    const changedStyle = {
-      ...this.state.mapStyle,
-      metadata: {
-        ...this.state.mapStyle.metadata,
-        [property]: value
-      }
-    }
-    this.onStyleChanged(changedStyle)
-  }
-
-  onStyleChanged = (newStyle, opts={}) => {
-    opts = {
-      save: true,
-      addRevision: true,
-      ...opts,
-    };
-
-    const errors = validate(newStyle, latest) || [];
-
-    // The validate function doesn't give us errors for duplicate error with
-    // empty string for layer.id, manually deal with that here.
-    const layerErrors = [];
-    if (newStyle && newStyle.layers) {
-      const foundLayers = new Map();
-      newStyle.layers.forEach((layer, index) => {
-        if (layer.id === "" && foundLayers.has(layer.id)) {
-          const message = `Duplicate layer: ${formatLayerId(layer.id)}`;
-          const error = new Error(
-            `layers[${index}]: duplicate layer id [empty_string], previously used`
-          );
-          layerErrors.push(error);
-        }
-        foundLayers.set(layer.id, true);
-      });
-    }
-
-    const mappedErrors = layerErrors.concat(errors).map(error => {
-      // Special case: Duplicate layer id
-      const dupMatch = error.message.match(/layers\[(\d+)\]: (duplicate layer id "?(.*)"?, previously used)/);
-      if (dupMatch) {
-        const [matchStr, index, message] = dupMatch;
-        return {
-          message: error.message,
-          parsed: {
-            type: "layer",
-            data: {
-              index: parseInt(index, 10),
-              key: "id",
-              message,
-            }
-          }
-        }
-      }
-
-      // Special case: Invalid source
-      const invalidSourceMatch = error.message.match(/layers\[(\d+)\]: (source "(?:.*)" not found)/);
-      if (invalidSourceMatch) {
-        const [matchStr, index, message] = invalidSourceMatch;
-        return {
-          message: error.message,
-          parsed: {
-            type: "layer",
-            data: {
-              index: parseInt(index, 10),
-              key: "source",
-              message,
-            }
-          }
-        }
-      }
-
-      const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
-      if (layerMatch) {
-        const [matchStr, index, group, property, message] = layerMatch;
-        const key = (group && property) ? [group, property].join(".") : property;
-        return {
-          message: error.message,
-          parsed: {
-            type: "layer",
-            data: {
-              index: parseInt(index, 10),
-              key,
-              message
-            }
-          }
-        }
-      }
-      else {
-        return {
-          message: error.message,
-        };
-      }
-    });
-
-    let dirtyMapStyle = undefined;
-    if (errors.length > 0) {
-      dirtyMapStyle = cloneDeep(newStyle);
-
-      errors.forEach(error => {
-        const {message} = error;
-        if (message) {
-          try {
-            const objPath = message.split(":")[0];
-            // Errors can be deply nested for example 'layers[0].filter[1][1][0]' we only care upto the property 'layers[0].filter'
-            const unsetPath = objPath.match(/^\S+?\[\d+\]\.[^\[]+/)[0];
-            unset(dirtyMapStyle, unsetPath);
-          }
-          catch (err) {
-            console.warn(err);
-          }
-        }
-      });
-    }
-
-    if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
-      this.updateFonts(newStyle.glyphs)
-    }
-    if(newStyle.sprite !== this.state.mapStyle.sprite) {
-      this.updateIcons(newStyle.sprite)
-    }
-
-    if (opts.addRevision) {
-      this.revisionStore.addRevision(newStyle);
-    }
-    if (opts.save) {
-      this.saveStyle(newStyle);
-    }
-       
-    this.setState({
-      mapStyle: newStyle,
-      dirtyMapStyle: dirtyMapStyle,
-      errors: mappedErrors,
-    })
-
-    this.fetchSources();
-  }
-
-  onUndo = () => {
-    const activeStyle = this.revisionStore.undo()
-
-    const messages = undoMessages(this.state.mapStyle, activeStyle)
-    this.onStyleChanged(activeStyle, {addRevision: false});
-    this.setState({
-      infos: messages,
-    })
-  }
-
-  onRedo = () => {
-    const activeStyle = this.revisionStore.redo()
-    const messages = redoMessages(this.state.mapStyle, activeStyle)
-    this.onStyleChanged(activeStyle, {addRevision: false});
-    this.setState({
-      infos: messages,
-    })
-  }
-
-  onMoveLayer = (move) => {
-    let { oldIndex, newIndex } = move;
-    let layers = this.state.mapStyle.layers;
-    oldIndex = clamp(oldIndex, 0, layers.length-1);
-    newIndex = clamp(newIndex, 0, layers.length-1);
-    if(oldIndex === newIndex) return;
-
-    if (oldIndex === this.state.selectedLayerIndex) {
-      this.setState({
-        selectedLayerIndex: newIndex
-      });
-    }
-
-    layers = layers.slice(0);
-    layers = arrayMove(layers, oldIndex, newIndex);
-    this.onLayersChange(layers);
-  }
-
-  onLayersChange = (changedLayers) => {
-    const changedStyle = {
-      ...this.state.mapStyle,
-      layers: changedLayers
-    }
-    this.onStyleChanged(changedStyle)
-  }
-
-  onLayerDestroy = (index) => {
-    let layers = this.state.mapStyle.layers;
-    const remainingLayers = layers.slice(0);
-    remainingLayers.splice(index, 1);
-    this.onLayersChange(remainingLayers);
-  }
-
-  onLayerCopy = (index) => {
-    let layers = this.state.mapStyle.layers;
-    const changedLayers = layers.slice(0)
-
-    const clonedLayer = cloneDeep(changedLayers[index])
-    clonedLayer.id = clonedLayer.id + "-copy"
-    changedLayers.splice(index, 0, clonedLayer)
-    this.onLayersChange(changedLayers)
-  }
-
-  onLayerVisibilityToggle = (index) => {
-    let layers = this.state.mapStyle.layers;
-    const changedLayers = layers.slice(0)
-
-    const layer = { ...changedLayers[index] }
-    const changedLayout = 'layout' in layer ? {...layer.layout} : {}
-    changedLayout.visibility = changedLayout.visibility === 'none' ? 'visible' : 'none'
-
-    layer.layout = changedLayout
-    changedLayers[index] = layer
-    this.onLayersChange(changedLayers)
-  }
-
-
-  onLayerIdChange = (index, oldId, newId) => {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    changedLayers[index] = {
-      ...changedLayers[index],
-      id: newId
-    }
-
-    this.onLayersChange(changedLayers)
-  }
-
-  onLayerChanged = (index, layer) => {
-    const changedLayers = this.state.mapStyle.layers.slice(0)
-    changedLayers[index] = layer
-
-    this.onLayersChange(changedLayers)
-  }
-
-  setMapState = (newState) => {
-    this.setState({
-      mapState: newState
-    })
-  }
-
-  setDefaultValues = (styleObj) => {
-    const metadata = styleObj.metadata || {}
-    if(metadata['maputnik:renderer'] === undefined) {
-      const changedStyle = {
-        ...styleObj,
-        metadata: {
-          ...styleObj.metadata,
-          'maputnik:renderer': 'mbgljs'
-        }
-      }
-      return changedStyle
-    } else {
-      return styleObj
-    }
-  }
-
-  openStyle = (styleObj) => {
-    styleObj = this.setDefaultValues(styleObj)
-    this.onStyleChanged(styleObj)
-  }
-
-  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 = normalizeSourceURL(url, MapboxGl.accessToken);
-        } catch(err) {
-          console.warn("Failed to normalizeSourceURL: ", err);
-        }
-
-        try {
-          url = setFetchAccessToken(url, this.state.mapStyle)
-        } catch(err) {
-          console.warn("Failed to setFetchAccessToken: ", err);
-        }
-
-        fetch(url, {
-          mode: 'cors',
-        })
-          .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
-      })
-    }
-  }
-
-  _getRenderer () {
-    const metadata = this.state.mapStyle.metadata || {};
-    return metadata['maputnik:renderer'] || 'mbgljs';
-  }
-
-  onMapChange = (mapView) => {
-    this.setState({
-      mapView,
-    });
-  }
-
-  mapRenderer() {
-    const {mapStyle, dirtyMapStyle} = this.state;
-    const metadata = this.state.mapStyle.metadata || {};
-
-    const mapProps = {
-      mapStyle: (dirtyMapStyle || mapStyle),
-      replaceAccessTokens: (mapStyle) => {
-        return style.replaceAccessTokens(mapStyle, {
-          allowFallback: true
-        });
-      },
-      onDataChange: (e) => {
-        this.layerWatcher.analyzeMap(e.map)
-        this.fetchSources();
-      },
-    }
-
-    const renderer = this._getRenderer();
-
-    let mapElement;
-
-    // Check if OL code has been loaded?
-    if(renderer === 'ol') {
-      mapElement = <OpenLayersMap
-        {...mapProps}
-        onChange={this.onMapChange}
-        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
-        onLayerSelect={this.onLayerSelect}
-      />
-    } else {
-      mapElement = <MapboxGlMap {...mapProps}
-        onChange={this.onMapChange}
-        options={this.state.mapboxGlDebugOptions}
-        inspectModeEnabled={this.state.mapState === "inspect"}
-        highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
-        onLayerSelect={this.onLayerSelect} />
-    }
-
-    let filterName;
-    if(this.state.mapState.match(/^filter-/)) {
-      filterName = this.state.mapState.replace(/^filter-/, "");
-    }
-    const elementStyle = {};
-    if (filterName) {
-      elementStyle.filter = `url('#${filterName}')`;
-    };
-
-    return <div style={elementStyle} className="maputnik-map__container">
-      {mapElement}
-    </div>
-  }
-
-  onLayerSelect = (index) => {
-    this.setState({ selectedLayerIndex: index })
-  }
-
-  setModal(modalName, value) {
-    if(modalName === 'survey' && value === false) {
-      localStorage.setItem('survey', '');
-    }
-
-    this.setState({
-      isOpen: {
-        ...this.state.isOpen,
-        [modalName]: value
-      }
-    })
-  }
-
-  toggleModal(modalName) {
-    this.setModal(modalName, !this.state.isOpen[modalName]);
-  }
-
-  onChangeOpenlayersDebug = (key, value) => {
-    this.setState({
-      openlayersDebugOptions: {
-        ...this.state.openlayersDebugOptions,
-        [key]: value,
-      }
-    });
-  }
-
-  onChangeMaboxGlDebug = (key, value) => {
-    this.setState({
-      mapboxGlDebugOptions: {
-        ...this.state.mapboxGlDebugOptions,
-        [key]: value,
-      }
-    });
-  }
-
-  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
-      renderer={this._getRenderer()}
-      mapState={this.state.mapState}
-      mapStyle={this.state.mapStyle}
-      inspectModeEnabled={this.state.mapState === "inspect"}
-      sources={this.state.sources}
-      onStyleChanged={this.onStyleChanged}
-      onStyleOpen={this.onStyleChanged}
-      onSetMapState={this.setMapState}
-      onToggleModal={this.toggleModal.bind(this)}
-    />
-
-    const layerList = <LayerList
-      onMoveLayer={this.onMoveLayer}
-      onLayerDestroy={this.onLayerDestroy}
-      onLayerCopy={this.onLayerCopy}
-      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
-      onLayersChange={this.onLayersChange}
-      onLayerSelect={this.onLayerSelect}
-      selectedLayerIndex={this.state.selectedLayerIndex}
-      layers={layers}
-      sources={this.state.sources}
-      errors={this.state.errors}
-    />
-
-    const layerEditor = selectedLayer ? <LayerEditor
-      key={selectedLayer.id}
-      layer={selectedLayer}
-      layerIndex={this.state.selectedLayerIndex}
-      isFirstLayer={this.state.selectedLayerIndex < 1}
-      isLastLayer={this.state.selectedLayerIndex === this.state.mapStyle.layers.length-1}
-      sources={this.state.sources}
-      vectorLayers={this.state.vectorLayers}
-      spec={this.state.spec}
-      onMoveLayer={this.onMoveLayer}
-      onLayerChanged={this.onLayerChanged}
-      onLayerDestroy={this.onLayerDestroy}
-      onLayerCopy={this.onLayerCopy}
-      onLayerVisibilityToggle={this.onLayerVisibilityToggle}
-      onLayerIdChange={this.onLayerIdChange}
-      errors={this.state.errors}
-    /> : null
-
-    const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
-      currentLayer={selectedLayer}
-      selectedLayerIndex={this.state.selectedLayerIndex}
-      onLayerSelect={this.onLayerSelect}
-      mapStyle={this.state.mapStyle}
-      errors={this.state.errors}
-      infos={this.state.infos}
-    /> : null
-
-
-    const modals = <div>
-      <DebugModal
-        renderer={this._getRenderer()}
-        mapboxGlDebugOptions={this.state.mapboxGlDebugOptions}
-        openlayersDebugOptions={this.state.openlayersDebugOptions}
-        onChangeMaboxGlDebug={this.onChangeMaboxGlDebug}
-        onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
-        isOpen={this.state.isOpen.debug}
-        onOpenToggle={this.toggleModal.bind(this, 'debug')}
-        mapView={this.state.mapView}
-      />
-      <ShortcutsModal
-        ref={(el) => this.shortcutEl = el}
-        isOpen={this.state.isOpen.shortcuts}
-        onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
-      />
-      <SettingsModal
-        mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged}
-        onChangeMetadataProperty={this.onChangeMetadataProperty}
-        isOpen={this.state.isOpen.settings}
-        onOpenToggle={this.toggleModal.bind(this, 'settings')}
-        openlayersDebugOptions={this.state.openlayersDebugOptions}
-      />
-      <ExportModal
-        mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged}
-        isOpen={this.state.isOpen.export}
-        onOpenToggle={this.toggleModal.bind(this, 'export')}
-      />
-      <OpenModal
-        isOpen={this.state.isOpen.open}
-        onStyleOpen={this.openStyle}
-        onOpenToggle={this.toggleModal.bind(this, 'open')}
-      />
-      <SourcesModal
-        mapStyle={this.state.mapStyle}
-        onStyleChanged={this.onStyleChanged}
-        isOpen={this.state.isOpen.sources}
-        onOpenToggle={this.toggleModal.bind(this, 'sources')}
-      />
-      <SurveyModal
-        isOpen={this.state.isOpen.survey}
-        onOpenToggle={this.toggleModal.bind(this, 'survey')}
-      />
-    </div>
-
-    return <AppLayout
-      toolbar={toolbar}
-      layerList={layerList}
-      layerEditor={layerEditor}
-      map={this.mapRenderer()}
-      bottom={bottomPanel}
-      modals={modals}
-    />
-  }
-}

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,
-    modals: PropTypes.node,
-  }
-
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
-  render() {
-    return <div className="maputnik-layout">
-      {this.props.toolbar}
-      <div className="maputnik-layout-list">
-        {this.props.layerList}
-      </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>
-      }
-      {this.props.modals}
-    </div>
-  }
-}
-
-export default AppLayout

src/components/Button.jsx

@@ -1,30 +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,
-    "aria-label": PropTypes.string,
-    onClick: PropTypes.func,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    disabled: PropTypes.bool,
-  }
-
-  render() {
-    return <button
-      onClick={this.props.onClick}
-      disabled={this.props.disabled}
-      aria-label={this.props["aria-label"]}
-      className={classnames("maputnik-button", this.props.className)}
-      data-wd-key={this.props["data-wd-key"]}
-      style={this.props.style}
-    >
-      {this.props.children}
-    </button>
-  }
-}
-
-export default Button

src/components/MessagePanel.jsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {formatLayerId} from './util/format';
-
-class MessagePanel extends React.Component {
-  static propTypes = {
-    errors: PropTypes.array,
-    infos: PropTypes.array,
-    mapStyle: PropTypes.object,
-    onLayerSelect: PropTypes.func,
-    currentLayer: PropTypes.object,
-    selectedLayerIndex: PropTypes.number,
-  }
-
-  static defaultProps = {
-    onLayerSelect: () => {},
-  }
-
-  render() {
-    const {selectedLayerIndex} = this.props;
-    const errors = this.props.errors.map((error, idx) => {
-      let content;
-      if (error.parsed && error.parsed.type === "layer") {
-        const {parsed} = error;
-        const {mapStyle, currentLayer} = this.props;
-        const layerId = mapStyle.layers[parsed.data.index].id;
-        content = (
-          <>
-            Layer <span>{formatLayerId(layerId)}</span>: {parsed.data.message}
-            {selectedLayerIndex !== parsed.data.index &&
-              <>
-                &nbsp;&mdash;&nbsp;
-                <button
-                  className="maputnik-message-panel__switch-button"
-                  onClick={() => this.props.onLayerSelect(parsed.data.index)}
-                >
-                  switch to layer
-                </button>
-              </>
-            }
-          </>
-        );
-      }
-      else {
-        content = error.message;
-      }
-      return <p key={"error-"+idx} className="maputnik-message-panel-error">
-        {content}
-      </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,236 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import {detect} from 'detect-browser';
-
-import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
-
-
-import logoImage from 'maputnik-design/logos/logo-color.svg'
-import pkgJson from '../../package.json'
-
-
-// This is required because of <https://stackoverflow.com/a/49846426>, there isn't another way to detect support that I'm aware of.
-const browser = detect();
-const colorAccessibilityFiltersEnabled = ['chrome', 'firefox'].indexOf(browser.name) > -1;
-
-
-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,
-    onToggleModal: PropTypes.func,
-  }
-
-  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 ToolbarLinkHighlighted extends React.Component {
-  static propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node,
-    href: PropTypes.string,
-    onToggleModal: PropTypes.func
-  }
-
-  render() {
-    return <a
-      className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
-      href={this.props.href}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <span className="maputnik-toolbar-link-wrapper">
-        {this.props.children}
-      </span>
-    </a>
-  }
-}
-
-class ToolbarSelect extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-    wdKey: PropTypes.string
-  }
-
-  render() {
-    return <div
-      className='maputnik-toolbar-select'
-      data-wd-key={this.props.wdKey}
-    >
-      {this.props.children}
-    </div>
-  }
-}
-
-class ToolbarAction extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-    onClick: PropTypes.func,
-    wdKey: PropTypes.string
-  }
-
-  render() {
-    return <button
-      className='maputnik-toolbar-action'
-      data-wd-key={this.props.wdKey}
-      onClick={this.props.onClick}
-    >
-      {this.props.children}
-    </button>
-  }
-}
-
-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,
-    children: PropTypes.node,
-    onToggleModal: PropTypes.func,
-    onSetMapState: PropTypes.func,
-    mapState: PropTypes.string,
-    renderer: PropTypes.string,
-  }
-
-  state = {
-    isOpen: {
-      settings: false,
-      sources: false,
-      open: false,
-      add: false,
-      export: false,
-    }
-  }
-
-  handleSelection(val) {
-    this.props.onSetMapState(val);
-  }
-
-  render() {
-    const views = [
-      {
-        id: "map",
-        title: "Map",
-      },
-      {
-        id: "inspect",
-        title: "Inspect",
-        disabled: this.props.renderer !== 'mbgljs',
-      },
-      {
-        id: "filter-deuteranopia",
-        title: "Map (deuteranopia)",
-        disabled: !colorAccessibilityFiltersEnabled,
-      },
-      {
-        id: "filter-protanopia",
-        title: "Map (protanopia)",
-        disabled: !colorAccessibilityFiltersEnabled,
-      },
-      {
-        id: "filter-tritanopia",
-        title: "Map (tritanopia)",
-        disabled: !colorAccessibilityFiltersEnabled,
-      },
-      {
-        id: "filter-achromatopsia",
-        title: "Map (achromatopsia)",
-        disabled: !colorAccessibilityFiltersEnabled,
-      },
-    ];
-
-    const currentView = views.find((view) => {
-      return view.id === this.props.mapState;
-    });
-
-    return <div className='maputnik-toolbar'>
-      <div className="maputnik-toolbar__inner">
-        <div
-          className="maputnik-toolbar-logo-container"
-        >
-          <a className="maputnik-toolbar-skip" href="#skip-menu">
-            Skip navigation
-          </a>
-          <a
-            href="https://github.com/maputnik/editor"
-            rel="noopener noreferrer"
-            target="_blank"
-            className="maputnik-toolbar-logo"
-          >
-            <span dangerouslySetInnerHTML={{__html: logoImage}} />
-            <h1>
-              <span className="maputnik-toolbar-name">{pkgJson.name}</span>
-              <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
-            </h1>
-          </a>
-        </div>
-        <div className="maputnik-toolbar__actions">
-          <ToolbarAction wdKey="nav:open" onClick={this.props.onToggleModal.bind(this, 'open')}>
-            <MdOpenInBrowser />
-            <IconText>Open</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:export" onClick={this.props.onToggleModal.bind(this, 'export')}>
-            <MdFileDownload />
-            <IconText>Export</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:sources" onClick={this.props.onToggleModal.bind(this, 'sources')}>
-            <MdLayers />
-            <IconText>Data Sources</IconText>
-          </ToolbarAction>
-          <ToolbarAction wdKey="nav:settings" onClick={this.props.onToggleModal.bind(this, 'settings')}>
-            <MdSettings />
-            <IconText>Style Settings</IconText>
-          </ToolbarAction>
-
-          <ToolbarSelect wdKey="nav:inspect">
-            <MdFindInPage />
-            <IconText>View </IconText>
-            <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
-              {views.map((item) => {
-                return (
-                  <option key={item.id} value={item.id} disabled={item.disabled}>
-                    {item.title}
-                  </option>
-                );
-              })}
-            </select>
-          </ToolbarSelect>
-
-          <ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
-            <MdHelpOutline />
-            <IconText>Help</IconText>
-          </ToolbarLink>
-          <ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
-            <MdAssignmentTurnedIn />
-            <IconText>Take the Maputnik Survey</IconText>
-          </ToolbarLinkHighlighted>
-        </div>
-      </div>
-    </div>
-  }
-}

src/components/fields/ColorField.jsx

@@ -1,133 +0,0 @@
-import React from 'react'
-import Color from 'color'
-import ChromePicker from 'react-color/lib/components/chrome/Chrome'
-import PropTypes from 'prop-types'
-import lodash from 'lodash';
-
-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,
-    value: PropTypes.string,
-    doc: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-  }
-
-  state = {
-    pickerOpened: false
-  }
-
-  constructor () {
-    super();
-    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
-  }
-
-  onChangeNoCheck (v) {
-    this.props.onChange(v);
-  }
-
-  //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)");
-    }
-  }
-
-  onChange (v) {
-    this.props.onChange(v === "" ? undefined : v);
-  }
-
-  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.onChangeNoCheck(formatColor(c))}
-      />
-      <div
-        className="maputnik-color-picker-offset"
-        onClick={this.togglePicker}
-        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
-        spellCheck="false"
-        className="maputnik-color"
-        ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker}
-        style={this.props.style}
-        name={this.props.name}
-        placeholder={this.props.default}
-        value={this.props.value ? this.props.value : ""}
-        onChange={(e) => this.onChange(e.target.value)}
-      />
-    </div>
-  }
-}
-
-export default ColorField

src/components/fields/DocLabel.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
-
-export default class DocLabel extends React.Component {
-  static propTypes = {
-    label: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]).isRequired,
-    fieldSpec: PropTypes.object,
-    onToggleDoc: PropTypes.func,
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {
-      open: false,
-    }
-  }
-
-  onToggleDoc = (open) => {
-    this.setState({
-      open,
-    }, () => {
-      if (this.props.onToggleDoc) {
-        this.props.onToggleDoc(this.state.open);
-      }
-    });
-  }
-
-  render() {
-    const {label, fieldSpec} = this.props;
-    const {doc} = fieldSpec || {};
-
-    if (doc) {
-      return <label className="maputnik-doc-wrapper">
-        <div className="maputnik-doc-target">
-          {label}
-          {'\xa0'}
-          <button
-            aria-label={this.state.open ? "close property documentation" : "open property documentation"}
-            className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
-            onClick={() => this.onToggleDoc(!this.state.open)}
-          >
-            {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
-          </button>
-        </div>
-      </label>
-    }
-    else if (label) {
-      return <label className="maputnik-doc-wrapper">
-        <div className="maputnik-doc-target">
-          {label}
-        </div>
-      </label>
-    }
-    else {
-      <div />
-    }
-  }
-}

src/components/fields/FunctionSpecField.jsx

@@ -1,352 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import SpecProperty from './_SpecProperty'
-import DataProperty from './_DataProperty'
-import ZoomProperty from './_ZoomProperty'
-import ExpressionProperty from './_ExpressionProperty'
-import {function as styleFunction} from '@mapbox/mapbox-gl-style-spec';
-import {findDefaultFromSpec} from '../util/spec-helper';
-
-
-function isLiteralExpression (value) {
-  return (Array.isArray(value) && value.length === 2 && value[0] === "literal");
-}
-
-function isGetExpression (value) {
-  return (
-    Array.isArray(value) &&
-    value.length === 2 &&
-    value[0] === "get"
-  );
-}
-
-function isZoomField(value) {
-  return (
-    typeof(value) === 'object' &&
-    value.stops &&
-    typeof(value.property) === 'undefined' &&
-    Array.isArray(value.stops) &&
-    value.stops.length > 1 &&
-    value.stops.every(stop => {
-      return (
-        Array.isArray(stop) &&
-        stop.length === 2
-      );
-    })
-  );
-}
-
-function isIdentityProperty (value) {
-  return (
-    typeof(value) === 'object' &&
-    value.type === "identity" &&
-    value.hasOwnProperty("property")
-  );
-}
-
-function isDataStopProperty (value) {
-  return (
-    typeof(value) === 'object' &&
-    value.stops &&
-    typeof(value.property) !== 'undefined' &&
-    value.stops.length > 1 &&
-    Array.isArray(value.stops) &&
-    value.stops.every(stop => {
-      return (
-        Array.isArray(stop) &&
-        stop.length === 2 &&
-        typeof(stop[0]) === 'object'
-      );
-    })
-  );
-}
-
-function isDataField(value) {
-  return (
-    isIdentityProperty(value) ||
-    isDataStopProperty(value)
-  );
-}
-
-function isPrimative (value) {
-  const valid = ["string", "boolean", "number"];
-  return valid.includes(typeof(value));
-}
-
-function isArrayOfPrimatives (values) {
-  if (Array.isArray(values)) {
-    return values.every(isPrimative);
-  }
-  return false;
-}
-
-function getDataType (value, fieldSpec={}) {
-  if (value === undefined) {
-    return "value";
-  }
-  else if (isPrimative(value)) {
-    return "value";
-  }
-  else if (fieldSpec.type === "array" && isArrayOfPrimatives(value)) {
-    return "value";
-  }
-  else if (isZoomField(value)) {
-    return "zoom_function";
-  }
-  else if (isDataField(value)) {
-    return "data_function";
-  }
-  else {
-    return "expression";
-  }
-}
-
-
-/** 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,
-      fieldType: PropTypes.string.isRequired,
-      fieldSpec: PropTypes.object.isRequired,
-      errors: PropTypes.object,
-
-      value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.array
-    ]),
-  }
-
-  constructor (props) {
-    super();
-    this.state = {
-      dataType: getDataType(props.value, props.fieldSpec),
-      isEditing: false,
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    // Because otherwise when editing values we end up accidentally changing field type.
-    if (state.isEditing) {
-      return {};
-    }
-    else {
-      return {
-        isEditing: false,
-        dataType: getDataType(props.value, props.fieldSpec)
-      };
-    }
-  }
-
-  getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.expression.interpolated) {
-      return "exponential"
-    }
-    if (fieldSpec.type === "number") {
-      return "interval"
-    }
-    return "categorical"
-  }
-
-  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)
-  }
-
-  deleteExpression = () => {
-    const {fieldSpec, fieldName} = this.props;
-    this.props.onChange(fieldName, fieldSpec.default);
-    this.setState({
-      dataType: "value",
-    });
-  }
-
-  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 || findDefaultFromSpec(this.props.fieldSpec)],
-        [10, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
-      ]
-    }
-    this.props.onChange(this.props.fieldName, zoomFunc)
-  }
-
-  undoExpression = () => {
-    const {value, fieldName} = this.props;
-
-    if (isGetExpression(value)) {
-      this.props.onChange(fieldName, {
-        "type": "identity",
-        "property": value[1]
-      });
-      this.setState({
-        dataType: "value",
-      });
-    }
-    else if (isLiteralExpression(value)) {
-      this.props.onChange(fieldName, value[1]);
-      this.setState({
-        dataType: "value",
-      });
-    }
-  }
-
-  canUndo = () => {
-    const {value, fieldSpec} = this.props;
-    return (
-      isGetExpression(value) ||
-      isLiteralExpression(value) ||
-      isPrimative(value) ||
-      (Array.isArray(value) && fieldSpec.type === "array")
-    );
-  }
-
-  makeExpression = () => {
-    const {value, fieldSpec} = this.props;
-    let expression;
-
-    if (typeof(value) === "object" && 'stops' in value) {
-      expression = styleFunction.convertFunction(value, fieldSpec);
-    }
-    else if (isIdentityProperty(value)) {
-      expression = ["get", value.property];
-    }
-    else {
-      expression = ["literal", value || this.props.fieldSpec.default];
-    }
-    this.props.onChange(this.props.fieldName, expression);
-  }
-
-  makeDataFunction = () => {
-    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
-    const stopValue = functionType === 'categorical' ? '' : 0;
-    const dataFunc = {
-      property: "",
-      type: functionType,
-      stops: [
-        [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
-        [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
-      ]
-    }
-    this.props.onChange(this.props.fieldName, dataFunc)
-  }
-
-  onMarkEditing = () => {
-    this.setState({isEditing: true});
-  }
-
-  onUnmarkEditing = () => {
-    this.setState({isEditing: false});
-  }
-
-  render() {
-    const {dataType} = this.state;
-    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
-    let specField;
-
-    if (dataType === "expression") {
-      specField = (
-        <ExpressionProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this, this.props.fieldName)}
-          canUndo={this.canUndo}
-          onUndo={this.undoExpression}
-          onDelete={this.deleteExpression}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onFocus={this.onMarkEditing}
-          onBlur={this.onUnmarkEditing}
-        />
-      );
-    }
-    else if (dataType === "zoom_function") {
-      specField = (
-        <ZoomProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this)}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop}
-          onExpressionClick={this.makeExpression} 
-        />
-      )
-    }
-    else if (dataType === "data_function") {
-      specField = (
-        <DataProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this)}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop}
-          onExpressionClick={this.makeExpression} 
-        />
-      )
-    }
-    else {
-      specField = (
-        <SpecProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this)}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onZoomClick={this.makeZoomFunction}
-          onDataClick={this.makeDataFunction} 
-          onExpressionClick={this.makeExpression} 
-        />
-      )
-    }
-    return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
-      {specField}
-    </div>
-  }
-}
-

src/components/fields/PropertyGroup.jsx

@@ -1,76 +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,
-    errors: PropTypes.object,
-  }
-
-  onPropertyChange = (property, newValue) => {
-    const group = getGroupName(this.props.spec, this.props.layer.type, property)
-    this.props.onChange(group , property, newValue)
-  }
-
-  render() {
-    const {errors} = this.props;
-    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]
-      const fieldType = fieldName in paint ? 'paint' : 'layout';
-
-      return <FunctionSpecField
-        errors={errors}
-        onChange={this.onPropertyChange}
-        key={fieldName}
-        fieldName={fieldName}
-        value={fieldValue}
-        fieldType={fieldType}
-        fieldSpec={fieldSpec}
-      />
-    })
-
-    return <div className="maputnik-property-group">
-      {fields}
-    </div>
-  }
-}

src/components/fields/SpecField.jsx

@@ -1,132 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-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 EnumInput from '../inputs/EnumInput'
-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)])
-
-          return <EnumInput
-            {...commonProps}
-            options={options}
-          />
-        case 'resolvedImage':
-        case 'formatted':
-        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}
-                fieldSpec={this.props.fieldSpec}
-                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,319 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-
-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 docUid from '../../libs/document-uid'
-import sortNumerically from '../../libs/sort-numerically'
-import {findDefaultFromSpec} from '../util/spec-helper';
-
-import labelFromFieldName from './_labelFromFieldName'
-import DeleteStopButton from './_DeleteStopButton'
-
-
-
-function setStopRefs(props, state) {
-  // 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(!state.refs.hasOwnProperty(idx)) {
-        if(!newRefs) {
-          newRefs = {...state};
-        }
-        newRefs[idx] = docUid("stop-");
-      }
-    })
-  }
-
-  return newRefs;
-}
-
-export default class DataProperty extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    onDeleteStop: PropTypes.func,
-    onAddStop: PropTypes.func,
-    onExpressionClick: PropTypes.func,
-    fieldName: PropTypes.string,
-    fieldType: PropTypes.string,
-    fieldSpec: PropTypes.object,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.array
-    ]),
-    errors: PropTypes.object,
-  }
-
-  state = {
-    refs: {}
-  }
-
-  componentDidMount() {
-    const newRefs = setStopRefs(this.props, this.state);
-
-    if(newRefs) {
-      this.setState({
-        refs: newRefs
-      })
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const newRefs = setStopRefs(props, state);
-    if(newRefs) {
-      return {
-        refs: newRefs
-      };
-    }
-    return null;
-  }
-
-  getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.expression.interpolated) {
-      return "exponential"
-    }
-    if (fieldSpec.type === "number") {
-      return "interval"
-    }
-    return "categorical"
-  }
-
-  getDataFunctionTypes(fieldSpec) {
-    if (fieldSpec.expression.interpolated) {
-      return ["categorical", "interval", "exponential", "identity"]
-    }
-    else {
-      return ["categorical", "interval", "identity"]
-    }
-  }
-
-  // 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].zoom, b.data[0].zoom));
-
-    // 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);
-  }
-
-  onChange = (fieldName, value) => {
-    if (value.type === "identity") {
-      value = {
-        type: value.type,
-        property: value.property,
-      };
-    }
-    else {
-      const stopValue = value.type === 'categorical' ? '' : 0;
-      value = {
-        property: "",
-        type: value.type,
-        // Default props if they don't already exist.
-        stops: [
-          [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
-          [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
-        ],
-        ...value,
-      }
-    }
-    this.props.onChange(fieldName, value);
-  }
-
-  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 orderedStops = this.orderStopsByZoom(stops);
-
-    const changedValue = {
-      ...this.props.value,
-      stops: orderedStops,
-    }
-    this.onChange(this.props.fieldName, changedValue)
-  }
-
-  changeDataProperty(propName, propVal) {
-    if (propVal) {
-      this.props.value[propName] = propVal
-    }
-    else {
-      delete this.props.value[propName]
-    }
-    this.onChange(this.props.fieldName, this.props.value)
-  }
-
-  render() {
-    const {fieldName, fieldType, errors} = this.props;
-
-    if (typeof this.props.value.type === "undefined") {
-      this.props.value.type = this.getFieldFunctionType(this.props.fieldSpec)
-    }
-
-    let dataFields;
-    if (this.props.value.stops) {
-      dataFields = this.props.value.stops.map((stop, idx) => {
-        const zoomLevel = typeof stop[0] === 'object' ? stop[0].zoom : undefined;
-        const key  = this.state.refs[idx];
-        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>
-        }
-
-        const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
-        const foundErrors = Object.entries(errors).filter(([key, error]) => {
-          return key.startsWith(errorKeyStart);
-        });
-
-        const message = foundErrors.map(([key, error]) => {
-          return error.message;
-        }).join("");
-        const error = message ? {message} : undefined;
-
-        return <InputBlock
-          error={error}
-          key={key}
-          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
-          fieldSpec={this.props.fieldSpec}
-          label={labelFromFieldName(this.props.fieldName)}
-        >
-          <div className="maputnik-data-spec-property-group">
-            <DocLabel
-              label="Type"
-            />
-            <div className="maputnik-data-spec-property-input">
-              <SelectInput
-                value={this.props.value.type}
-                onChange={propVal => this.changeDataProperty("type", propVal)}
-                title={"Select a type of data scale (default is 'categorical')."}
-                options={this.getDataFunctionTypes(this.props.fieldSpec)}
-              />
-            </div>
-          </div>
-          <div className="maputnik-data-spec-property-group">
-            <DocLabel
-              label="Property"
-            />
-            <div className="maputnik-data-spec-property-input">
-              <StringInput
-                value={this.props.value.property}
-                title={"Input a data property to base styles off of."}
-                onChange={propVal => this.changeDataProperty("property", propVal)}
-              />
-            </div>
-          </div>
-          {dataFields &&
-            <div className="maputnik-data-spec-property-group">
-              <DocLabel
-                label="Default"
-              />
-              <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 &&
-        <>
-          {dataFields}
-          <Button
-            className="maputnik-add-stop"
-            onClick={this.props.onAddStop.bind(this)}
-          >
-            <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-              <path fill="currentColor" d={mdiTableRowPlusAfter} />
-            </svg> Add stop
-          </Button>
-        </>
-      }
-      <Button
-        className="maputnik-add-stop"
-        onClick={this.props.onExpressionClick.bind(this)}
-      >
-        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-          <path fill="currentColor" d={mdiFunctionVariant} />
-        </svg> Convert to expression
-      </Button>
-    </div>
-  }
-}

src/components/fields/_DeleteStopButton.jsx

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

src/components/fields/_ExpressionProperty.jsx

@@ -1,135 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import InputBlock from '../inputs/InputBlock'
-import Button from '../Button'
-import {MdDelete, MdUndo} from 'react-icons/md'
-import StringInput from '../inputs/StringInput'
-
-import labelFromFieldName from './_labelFromFieldName'
-import stringifyPretty from 'json-stringify-pretty-compact'
-import JSONEditor from '../layers/JSONEditor'
-
-
-export default class ExpressionProperty extends React.Component {
-  static propTypes = {
-    onDelete: PropTypes.func,
-    fieldName: PropTypes.string,
-    fieldType: PropTypes.string,
-    fieldSpec: PropTypes.object,
-    value: PropTypes.any,
-    errors: PropTypes.object,
-    onChange: PropTypes.func,
-    onUndo: PropTypes.func,
-    canUndo: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-  }
-
-  static defaultProps = {
-    errors: {},
-    onFocus: () => {},
-    onBlur: () => {},
-  }
-
-  constructor (props) {
-    super();
-    this.state = {
-      jsonError: false,
-    };
-  }
-
-  onJSONInvalid = (err) => {
-    this.setState({
-      jsonError: true,
-    })
-  }
-
-  onJSONValid = () => {
-    this.setState({
-      jsonError: false,
-    })
-  }
-
-  render() {
-    const {errors, fieldName, fieldType, value, canUndo} = this.props;
-    const {jsonError} = this.state;
-    const undoDisabled = canUndo ? !canUndo() : true;
-
-    const deleteStopBtn = (
-      <>
-        {this.props.onUndo &&
-          <Button
-            key="undo_action"
-            onClick={this.props.onUndo}
-            disabled={undoDisabled}
-            className="maputnik-delete-stop"
-          >
-            <MdUndo />
-          </Button>
-        }
-        <Button
-          key="delete_action"
-          onClick={this.props.onDelete}
-          className="maputnik-delete-stop"
-        >
-          <MdDelete />
-        </Button>
-      </>
-    );
-
-    const fieldKey = fieldType === undefined ? fieldName : `${fieldType}.${fieldName}`;
-
-    const fieldError = errors[fieldKey];
-    const errorKeyStart = `${fieldKey}[`;
-    const foundErrors = [];
-
-    function getValue (data) {
-      return stringifyPretty(data, {indent: 2, maxLength: 38})
-    }
-    
-    if (jsonError) {
-      foundErrors.push({message: "Invalid JSON"});
-    }
-    else {
-      Object.entries(errors)
-      .filter(([key, error]) => {
-        return key.startsWith(errorKeyStart);
-      })
-      .forEach(([key, error]) => {
-        return foundErrors.push(error);
-      })
-
-      if (fieldError) {
-        foundErrors.push(fieldError);
-      }
-    }
-
-    return <InputBlock
-      error={foundErrors}
-      fieldSpec={this.props.fieldSpec}
-      label={labelFromFieldName(this.props.fieldName)}
-      action={deleteStopBtn}
-      wideMode={true}
-    >
-      <JSONEditor
-        mode={{name: "mgl"}}
-        lint={{
-          context: "expression",
-          spec: this.props.fieldSpec,
-        }}
-        className="maputnik-expression-editor"
-        onFocus={this.props.onFocus}
-        onBlur={this.props.onBlur}
-        onJSONInvalid={this.onJSONInvalid}
-        onJSONValid={this.onJSONValid}
-        layer={value}
-        lineNumbers={false}
-        maxHeight={200}
-        lineWrapping={true}
-        getValue={getValue}
-        onChange={this.props.onChange}
-      />
-    </InputBlock>
-  }
-}

src/components/fields/_FunctionButtons.jsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import Button from '../Button'
-import {MdFunctions, MdInsertChart} from 'react-icons/md'
-import {mdiFunctionVariant} from '@mdi/js';
-
-
-/**
- * So here we can't just check is `Array.isArray(value)` because certain
- * properties accept arrays as values, for example `text-font`. So we must try
- * and create an expression.
- */
-function isExpression(value, fieldSpec={}) {
-  if (!Array.isArray(value)) {
-    return false;
-  }
-  try {
-    expression.createExpression(value, fieldSpec);
-    return true;
-  }
-  catch (err) {
-    return false;
-  }
-}
-
-export default class FunctionButtons extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object,
-    onZoomClick: PropTypes.func,
-    onDataClick: PropTypes.func,
-    onExpressionClick: PropTypes.func,
-  }
-
-  render() {
-    let makeZoomButton, makeDataButton, expressionButton;
-
-    if (this.props.fieldSpec.expression.parameters.includes('zoom')) {
-      expressionButton = (
-        <Button
-          className="maputnik-make-zoom-function"
-          onClick={this.props.onExpressionClick}
-        >
-          <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiFunctionVariant} />
-          </svg>
-        </Button>
-      );
-
-      makeZoomButton = <Button
-        className="maputnik-make-zoom-function"
-        onClick={this.props.onZoomClick}
-        title={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-      >
-        <MdFunctions />
-      </Button>
-
-      if (this.props.fieldSpec['property-type'] === 'data-driven') {
-        makeDataButton = <Button
-          className="maputnik-make-data-function"
-          onClick={this.props.onDataClick}
-          title={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
-        >
-          <MdInsertChart />
-        </Button>
-      }
-      return <div>
-        {expressionButton}
-        {makeDataButton}
-        {makeZoomButton}
-      </div>
-    }
-    else {
-      return <div>{expressionButton}</div>
-    }
-  }
-}

src/components/fields/_SpecProperty.jsx

@@ -1,49 +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,
-    fieldType: PropTypes.string,
-    fieldSpec: PropTypes.object,
-    value: PropTypes.any,
-    errors: PropTypes.object,
-    onExpressionClick: PropTypes.func,
-  }
-
-  static defaultProps = {
-    errors: {},
-  }
-
-  render() {
-    const {errors, fieldName, fieldType} = this.props;
-
-    const functionBtn = <FunctionButtons
-      fieldSpec={this.props.fieldSpec}
-      onZoomClick={this.props.onZoomClick}
-      onDataClick={this.props.onDataClick} 
-      value={this.props.value}
-      onExpressionClick={this.props.onExpressionClick} 
-    />
-
-    const error = errors[fieldType+"."+fieldName];
-
-    return <InputBlock
-      error={error}
-      fieldSpec={this.props.fieldSpec}
-      label={labelFromFieldName(this.props.fieldName)}
-      action={functionBtn}
-    >
-      <SpecField {...this.props} />
-    </InputBlock>
-  }
-}

src/components/fields/_ZoomProperty.jsx

@@ -1,194 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {mdiFunctionVariant, mdiTableRowPlusAfter} from '@mdi/js';
-
-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'
-
-
-/**
- * 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.
- */
-function setStopRefs(props, state) {
-  // 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(!state.refs.hasOwnProperty(idx)) {
-        if(!newRefs) {
-          newRefs = {...state};
-        }
-        newRefs[idx] = docUid("stop-");
-      }
-    })
-  }
-
-  return newRefs;
-}
-
-
-export default class ZoomProperty extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    onDeleteStop: PropTypes.func,
-    onAddStop: PropTypes.func,
-    onExpressionClick: PropTypes.func,
-    fieldType: PropTypes.string,
-    fieldName: PropTypes.string,
-    fieldSpec: PropTypes.object,
-    errors: PropTypes.object,
-    value: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.bool,
-      PropTypes.array
-    ]),
-  }
-
-  static defaultProps = {
-    errors: {},
-  }
-
-  state = {
-    refs: {}
-  }
-
-  componentDidMount() {
-    const newRefs = setStopRefs(this.props, this.state);
-
-    if(newRefs) {
-      this.setState({
-        refs: newRefs
-      })
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const newRefs = setStopRefs(props, state);
-    if(newRefs) {
-      return {
-        refs: newRefs
-      };
-    }
-    return null;
-  }
-
-  // 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 {fieldName, fieldType, errors} = this.props;
-
-    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)} />
-
-      const errorKeyStart = `${fieldType}.${fieldName}.stops[${idx}]`;
-      const foundErrors = Object.entries(errors).filter(([key, error]) => {
-        return key.startsWith(errorKeyStart);
-      });
-
-      const message = foundErrors.map(([key, error]) => {
-        return error.message;
-      }).join("");
-      const error = message ? {message} : undefined;
-
-      return <InputBlock
-        error={error}
-        key={key}
-        fieldSpec={this.props.fieldSpec}
-        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)}
-      >
-        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-          <path fill="currentColor" d={mdiTableRowPlusAfter} />
-        </svg> Add stop
-      </Button>
-      <Button
-        className="maputnik-add-stop"
-        onClick={this.props.onExpressionClick.bind(this)}
-      >
-        <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-          <path fill="currentColor" d={mdiFunctionVariant} />
-        </svg> Convert to expression
-      </Button>
-    </div>
-  }
-}

src/components/fields/_labelFromFieldName.js

@@ -1,13 +0,0 @@
-import capitalize from 'lodash.capitalize'
-
-export default function labelFromFieldName(fieldName) {
-  let label;
-  const parts = fieldName.split('-');
-  if (parts.length > 1) {
-    label = fieldName.split('-').slice(1).join(' ');
-  }
-  else {
-    label = fieldName;
-  }
-  return capitalize(label);
-}

src/components/filter/FilterEditor.jsx

@@ -1,313 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { combiningFilterOps } from '../../libs/filterops.js'
-import {mdiTableRowPlusAfter} from '@mdi/js';
-
-import {latest, validate, migrate} from '@mapbox/mapbox-gl-style-spec'
-import DocLabel from '../fields/DocLabel'
-import SelectInput from '../inputs/SelectInput'
-import InputBlock from '../inputs/InputBlock'
-import SingleFilterEditor from './SingleFilterEditor'
-import FilterEditorBlock from './FilterEditorBlock'
-import Button from '../Button'
-import SpecDoc from '../inputs/SpecDoc'
-import ExpressionProperty from '../fields/_ExpressionProperty';
-import {mdiFunctionVariant} from '@mdi/js';
-
-
-function combiningFilter (props) {
-  let filter = props.filter || ['all'];
-
-  if (!Array.isArray(filter)) {
-    return filter;
-  }
-
-  let combiningOp = filter[0];
-  let filters = filter.slice(1);
-
-  if(combiningFilterOps.indexOf(combiningOp) < 0) {
-    combiningOp = 'all';
-    filters = [filter.slice(0)];
-  }
-
-  return [combiningOp, ...filters];
-}
-
-function migrateFilter (filter) {
-  return migrate(createStyleFromFilter(filter)).layers[0].filter;
-}
-
-function createStyleFromFilter (filter) {
-  return {
-    "id": "tmp",
-    "version": 8,
-    "name": "Empty Style",
-    "metadata": {"maputnik:renderer": "mbgljs"},
-    "sources": {
-      "tmp": {
-        "type": "geojson",
-        "data": {}
-      }
-    },
-    "sprite": "",
-    "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
-    "layers": [
-      {
-        id: "tmp",
-        type: "fill",
-        source: "tmp",
-        filter: filter,
-      },
-    ],
-  };
-}
-
-/**
- * This is doing way more work than we need it to, however validating a whole
- * style if the only thing that's exported from mapbox-gl-style-spec at the
- * moment. Not really an issue though as it take ~0.1ms to calculate.
- */
-function checkIfSimpleFilter (filter) {
-  if (!filter || !combiningFilterOps.includes(filter[0])) {
-    return false;
-  }
-
-  // Because "none" isn't supported by the next expression syntax we can test
-  // with ["none", ...] because it'll return false if it's a new style
-  // expression.
-  const moddedFilter = ["none", ...filter.slice(1)];
-  const tmpStyle = createStyleFromFilter(moddedFilter)
-
-  const errors = validate(tmpStyle);
-  return (errors.length < 1);
-}
-
-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,
-    errors: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    filter: ["all"],
-  }
-
-  constructor (props) {
-    super();
-    this.state = {
-      showDoc: false,
-      displaySimpleFilter: checkIfSimpleFilter(combiningFilter(props)),
-    };
-  }
-
-  // Convert filter to combining filter
-  onFilterPartChanged(filterIdx, newPart) {
-    const newFilter = combiningFilter(this.props).slice(0)
-    newFilter[filterIdx] = newPart
-    this.props.onChange(newFilter)
-  }
-
-  deleteFilterItem(filterIdx) {
-    const newFilter = combiningFilter(this.props).slice(0)
-    newFilter.splice(filterIdx + 1, 1)
-    this.props.onChange(newFilter)
-  }
-
-  addFilterItem = () => {
-    const newFilterItem = combiningFilter(this.props).slice(0)
-    newFilterItem.push(['==', 'name', ''])
-    this.props.onChange(newFilterItem)
-  }
-
-  onToggleDoc = (val) => {
-    this.setState({
-      showDoc: val
-    });
-  }
-
-  makeFilter = () => {
-    this.setState({
-      displaySimpleFilter: true,
-    })
-  }
-
-  makeExpression = () => {
-    let filter = combiningFilter(this.props);
-    this.props.onChange(migrateFilter(filter));
-    this.setState({
-      displaySimpleFilter: false,
-    })
-  }
-
-  static getDerivedStateFromProps (props, currentState) {
-    const {filter} = props;
-    const displaySimpleFilter = checkIfSimpleFilter(combiningFilter(props));
-
-    // Upgrade but never downgrade
-    if (!displaySimpleFilter && currentState.displaySimpleFilter === true) {
-      return {
-        displaySimpleFilter: false,
-        valueIsSimpleFilter: false,
-      };
-    }
-    else if (displaySimpleFilter && currentState.displaySimpleFilter === false) {
-      return {
-        valueIsSimpleFilter: true,
-      }
-    }
-    else {
-      return {
-        valueIsSimpleFilter: false,
-      };
-    }
-  }
-
-  render() {
-    const {errors} = this.props;
-    const {displaySimpleFilter} = this.state;
-    const fieldSpec={
-      doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."
-    };
-    const defaultFilter = ["all"];
-
-    const isNestedCombiningFilter = displaySimpleFilter && hasNestedCombiningFilter(combiningFilter(this.props));
-
-    if (isNestedCombiningFilter) {
-      return <div className="maputnik-filter-editor-unsupported">
-        <p>
-          Nested filters are not supported.
-        </p>
-        <Button
-          onClick={this.makeExpression}
-        >
-          <svg style={{marginRight: "0.2em", width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-            <path fill="currentColor" d={mdiFunctionVariant} />
-          </svg>
-          Upgrade to expression
-        </Button>
-      </div>
-    }
-    else if (displaySimpleFilter) {
-      const filter = combiningFilter(this.props);
-      let combiningOp = filter[0];
-      let filters = filter.slice(1)
-
-      const actions = (
-        <div>
-          <Button
-            onClick={this.makeExpression}
-            className="maputnik-make-zoom-function"
-          >
-            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
-              <path fill="currentColor" d={mdiFunctionVariant} />
-            </svg>
-          </Button>
-        </div>
-      );
-
-      const editorBlocks = filters.map((f, idx) => {
-        const error = errors[`filter[${idx+1}]`];
-
-        return (
-          <div key={`block-${idx}`}>
-            <FilterEditorBlock key={idx} onDelete={this.deleteFilterItem.bind(this, idx)}>
-              <SingleFilterEditor
-                properties={this.props.properties}
-                filter={f}
-                onChange={this.onFilterPartChanged.bind(this, idx + 1)}
-              />
-            </FilterEditorBlock>
-            {error &&
-              <div key="error" className="maputnik-inline-error">{error.message}</div>
-            }
-          </div>
-        );
-      })
-
-
-      return (
-        <>
-          <InputBlock
-            key="top"
-            fieldSpec={fieldSpec}
-            label={"Filter"}
-            action={actions}
-          >
-            <SelectInput
-              value={combiningOp}
-              onChange={this.onFilterPartChanged.bind(this, 0)}
-              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
-            />
-          </InputBlock>
-          {editorBlocks}
-          <div
-            key="buttons"
-            className="maputnik-filter-editor-add-wrapper"
-          >
-            <Button
-              data-wd-key="layer-filter-button"
-              className="maputnik-add-filter"
-              onClick={this.addFilterItem}
-            >
-              <svg style={{width:"14px", height:"14px", verticalAlign: "text-bottom"}} viewBox="0 0 24 24">
-                <path fill="currentColor" d={mdiTableRowPlusAfter} />
-              </svg> Add filter
-            </Button>
-          </div>
-          <div
-            key="doc"
-            className="maputnik-doc-inline"
-            style={{display: this.state.showDoc ? '' : 'none'}}
-          >
-            <SpecDoc fieldSpec={fieldSpec} />
-          </div>
-        </>
-      );
-    }
-    else {
-      let {filter} = this.props;
-
-      return (
-        <>
-          <ExpressionProperty
-            onDelete={() => {
-              this.setState({displaySimpleFilter: true});
-              this.props.onChange(defaultFilter);
-            }}
-            fieldName="filter"
-            fieldSpec={fieldSpec}
-            value={filter}
-            errors={errors}
-            onChange={this.props.onChange}
-          />
-          {this.state.valueIsSimpleFilter &&
-            <div className="maputnik-expr-infobox">
-              You&apos;ve entered a old style filter,{' '}
-              <button
-                onClick={this.makeFilter}
-                className="maputnik-expr-infobox__button"
-              >
-                switch to filter editor
-              </button>
-            </div>
-          }
-        </>
-      );
-    }
-  }
-}

src/components/filter/FilterEditorBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Button from '../Button'
-import {MdDelete} from 'react-icons/md'
-
-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}
-        >
-          <MdDelete />
-        </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,34 +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'
-import MissingIcon from './MissingIcon.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} />
-      default: return <MissingIcon {...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/MissingIcon.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import {MdPriorityHigh} from 'react-icons/md'
-
-
-export default class MissingIcon extends React.Component {
-  render() {
-    return (
-      <MdPriorityHigh {...this.props} />
-    )
-  }
-}

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,109 +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,
-  }
-
-  static defaultProps = {
-    value: [],
-    default: [],
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {
-      value: this.props.value.slice(0),
-      // This is so we can compare changes in getDerivedStateFromProps
-      initialPropsValue: this.props.value.slice(0),
-    };
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const value = [];
-    const initialPropsValue = state.initialPropsValue.slice(0);
-
-    Array(props.length).fill(null).map((_, i) => {
-      if (props.value[i] === state.initialPropsValue[i]) {
-        value[i] = state.value[i];
-      }
-      else {
-        value[i] = state.value[i];
-        initialPropsValue[i] = state.value[i];
-      }
-    })
-
-    return {
-      value,
-      initialPropsValue,
-    };
-  }
-
-  isComplete (value) {
-    return Array(this.props.length).fill(null).every((_, i) => {
-      const val = value[i]
-      return !(val === undefined || val === "");
-    });
-  }
-
-  changeValue(idx, newValue) {
-    const value = this.state.value.slice(0);
-    value[idx] = newValue;
-
-    this.setState({
-      value,
-    }, () => {
-      if (this.isComplete(value)) {
-        this.props.onChange(value);
-      }
-      else {
-        // Unset until complete
-        this.props.onChange(undefined);
-      }
-    });
-  }
-
-  render() {
-    const {value} = this.state;
-
-    const containsValues = (
-      value.length > 0 &&
-      !value.every(val => {
-        return (val === "" || val === undefined)
-      })
-    );
-
-    const inputs = Array(this.props.length).fill(null).map((_, i) => {
-      if(this.props.type === 'number') {
-        return <NumberInput
-          key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
-          required={containsValues ? true : false}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      } else {
-        return <StringInput
-          key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
-          required={containsValues ? true : false}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-    })
-
-    return <div className="maputnik-array">
-      {inputs}
-    </div>
-  }
-}
-
-export default ArrayInput

src/components/inputs/AutocompleteInput.jsx

@@ -1,98 +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
-  }
-
-  state = {
-    maxHeight: MAX_HEIGHT
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    options: [],
-  }
-
-  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();
-  }
-
-  onChange (v) {
-    this.props.onChange(v === "" ? undefined : v);
-  }
-
-  render() {
-    return <div
-      ref={(el) => {
-        this.autocompleteMenuEl = el;
-      }}
-    >
-      <Autocomplete
-        menuStyle={{
-          position: "fixed",
-          overflow: "auto",
-          maxHeight: this.state.maxHeight,
-          zIndex: '998'
-        }}
-        wrapperProps={{
-          className: "maputnik-autocomplete",
-          style: null
-        }}
-        inputProps={{
-          className: "maputnik-string",
-          spellCheck: false
-        }}
-        value={this.props.value}
-        items={this.props.options}
-        getItemValue={(item) => item[0]}
-        onSelect={v => this.onChange(v)}
-        onChange={(e, v) => this.onChange(v)}
-        shouldItemRender={(item, value="") => {
-          if (typeof(value) === "string") {
-            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,35 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-class CheckboxInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.bool,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-  }
-
-  static defaultProps = {
-    value: false,
-  }
-
-  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,126 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StringInput from './StringInput'
-import NumberInput from './NumberInput'
-import Button from '../Button'
-import {MdDelete} from 'react-icons/md'
-import DocLabel from '../fields/DocLabel'
-import EnumInput from '../inputs/SelectInput'
-import capitalize from 'lodash.capitalize'
-
-
-class DynamicArrayInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-    style: PropTypes.object,
-    fieldSpec: 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 if (this.props.type === 'enum') {
-      const {fieldSpec} = this.props;
-      const defaultValue = Object.keys(fieldSpec.values)[0];
-      values.push(defaultValue);
-    } 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)} />
-      let input;
-      if (this.props.type === 'number') {
-        input = <NumberInput
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-      else if (this.props.type === 'enum') {
-        const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)]);
-
-        input = <EnumInput
-          options={options}
-          value={v}
-          onChange={this.changeValue.bind(this, i)}
-        />
-      }
-      else {
-        input = <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}
-      >
-        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={<MdDelete />}
-        doc={"Remove array entry."}
-      />
-    </Button>
-  }
-}
-
-export default DynamicArrayInput

src/components/inputs/EnumInput.jsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import SelectInput from '../inputs/SelectInput'
-import MultiButtonInput from '../inputs/MultiButtonInput'
-
-
-function optionsLabelLength(options) {
-  let sum = 0;
-  options.forEach(([_, label]) => {
-    sum += label.length
-  })
-  return sum
-}
-
-
-class EnumInput extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    options: PropTypes.array,
-  }
-
-  render() {
-    const {options, value, onChange} = this.props;
-
-    if(options.length <= 3 && optionsLabelLength(options) <= 20) {
-      return <MultiButtonInput
-        options={options}
-        value={value || this.props.default}
-        onChange={onChange}
-      />
-    } else {
-      return <SelectInput
-        options={options}
-        value={value || this.props.default}
-        onChange={onChange}
-      />
-    }
-  }
-}
-
-export default EnumInput

src/components/inputs/FontInput.jsx

@@ -1,56 +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,
-    default: PropTypes.array,
-    fonts: PropTypes.array,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    fonts: []
-  }
-
-  get values() {
-    const out = this.props.value || this.props.default || [];
-
-    // Always put a "" in the last field to you can keep adding entries
-    if (out[out.length-1] !== ""){
-      return out.concat("");
-    }
-    else {
-      return out;
-    }
-  }
-
-  changeFont(idx, newValue) {
-    const changedValues = this.values.slice(0)
-    changedValues[idx] = newValue
-    const filteredValues = changedValues
-      .filter(v => v !== undefined)
-      .filter(v => v !== "")
-
-    this.props.onChange(filteredValues);
-  }
-
-  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.string,
-    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,95 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import DocLabel from '../fields/DocLabel'
-import SpecDoc from './SpecDoc'
-
-
-/** 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,
-    action: PropTypes.element,
-    children: PropTypes.node.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-    fieldSpec: PropTypes.object,
-    wideMode: PropTypes.bool,
-    error: PropTypes.array,
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {
-      showDoc: false,
-    }
-  }
-
-  onChange(e) {
-    const value = e.target.value
-    return this.props.onChange(value === "" ? undefined : value)
-  }
-
-  onToggleDoc = (val) => {
-    this.setState({
-      showDoc: val
-    });
-  }
-
-  render() {
-    const errors = [].concat(this.props.error || []);
-
-    return <div style={this.props.style}
-      data-wd-key={this.props["data-wd-key"]}
-      className={classnames({
-        "maputnik-input-block": true,
-        "maputnik-input-block--wide": this.props.wideMode,
-        "maputnik-action-block": this.props.action
-      })}
-      >
-      {this.props.fieldSpec &&
-      <div className="maputnik-input-block-label">
-        <DocLabel
-          label={this.props.label}
-          onToggleDoc={this.onToggleDoc}
-          fieldSpec={this.props.fieldSpec}
-        />
-      </div>
-      }
-      {!this.props.fieldSpec &&
-      <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>
-      {errors.length > 0 &&
-        <div className="maputnik-inline-error">
-          {[].concat(this.props.error).map((error, idx) => {
-            return <div key={idx}>{error.message}</div>
-          })}
-        </div>
-      }
-      {this.props.fieldSpec &&
-      <div
-        className="maputnik-doc-inline"
-        style={{display: this.state.showDoc ? '' : 'none'}}
-      >
-        <SpecDoc fieldSpec={this.props.fieldSpec} />
-      </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,233 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-let IDX = 0;
-
-class NumberInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    default: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    onChange: PropTypes.func,
-    allowRange: PropTypes.bool,
-    rangeStep: PropTypes.number,
-    wdKey: PropTypes.string,
-    required: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    rangeStep: 1
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      uuid: IDX++,
-      editing: false,
-      value: props.value,
-      dirtyValue: props.value,
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (!state.editing && props.value !== state.value) {
-      return {
-        value: props.value,
-        dirtyValue: props.value,
-      };
-    }
-    return null;
-  }
-
-  changeValue(newValue) {
-    const value = (newValue === "" || newValue === undefined) ?
-      undefined :
-      parseFloat(newValue);
-
-    const hasChanged = this.props.value !== value;
-    if(this.isValid(value) && hasChanged) {
-      this.props.onChange(value)
-      this.setState({
-        value: newValue,
-      });
-    }
-    else if (!this.isValid(value) && hasChanged) {
-      this.setState({
-        value: undefined,
-      });
-    }
-
-    this.setState({
-      dirtyValue: newValue === "" ? undefined : newValue,
-    })
-  }
-
-  isValid(v) {
-    if (v === undefined) {
-      return true;
-    }
-
-    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 = () => {
-    this.setState({editing: false});
-    // Reset explicitly to default value if value has been cleared
-    if(this.state.value === "") {
-      return;
-    }
-
-    // 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)
-        this.setState({dirtyValue: this.props.value});
-      } else {
-        this.changeValue(undefined);
-        this.setState({dirtyValue: undefined});
-      }
-    }
-  }
-
-  onChangeRange = (e) => {
-    let value = parseFloat(e.target.value, 10);
-    const step = this.props.rangeStep;
-    let dirtyValue = value;
-
-    if(step) {
-      // Can't do this with the <input/> range step attribute else we won't be able to set a high precision value via the text input.
-      const snap = value % step;
-
-      // Round up/down to step
-      if (this._keyboardEvent) {
-        // If it's keyboard event we might get a low positive/negative value,
-        // for example we might go from 13 to 13.23, however because we know
-        // that came from a keyboard event we always want to increase by a
-        // single step value.
-        if (value < this.state.dirtyValue) {
-          value = this.state.value - step;
-        }
-        else {
-          value = this.state.value + step
-        }
-        dirtyValue = value;
-      }
-      else {
-        if (snap < step/2) {
-          value = value - snap;
-        }
-        else {
-          value = value + (step - snap);
-        };
-      }
-    }
-
-    this._keyboardEvent = false;
-
-    // Clamp between min/max
-    value = Math.max(this.props.min, Math.min(this.props.max, value));
-
-    this.setState({value, dirtyValue});
-    this.props.onChange(value);
-  }
-
-  render() {
-    if(
-      this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
-      this.props.min !== undefined && this.props.max !== undefined &&
-      this.props.allowRange
-    ) {
-      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
-      const defaultValue = this.props.default === undefined ? "" : this.props.default;
-      let inputValue;
-      if (this.state.editingRange) {
-        inputValue = this.state.value;
-      }
-      else {
-        inputValue = value;
-      }
-
-      return <div className="maputnik-number-container">
-        <input
-          className="maputnik-number-range"
-          key="range"
-          type="range"
-          max={this.props.max}
-          min={this.props.min}
-          step="any"
-          spellCheck="false"
-          value={value === undefined ? defaultValue : value}
-          aria-hidden="true"
-          onChange={this.onChangeRange}
-          onKeyDown={() => {
-            this._keyboardEvent = true;
-          }}
-          onPointerDown={() => {
-            this.setState({editing: true, editingRange: true});
-          }}
-          onPointerUp={() => {
-            // Safari doesn't get onBlur event
-            this.setState({editing: false, editingRange: false});
-          }}
-          onBlur={() => {
-            this.setState({
-              editing: false,
-              editingRange: false,
-              dirtyValue: this.state.value,
-            });
-          }}
-        />
-        <input
-          key="text"
-          type="text"
-          spellCheck="false"
-          className="maputnik-number"
-          placeholder={this.props.default}
-          value={inputValue === undefined ? "" : inputValue}
-          onFocus={e => {
-            this.setState({editing: true});
-          }}
-          onChange={e => {
-            this.changeValue(e.target.value);
-          }}
-          onBlur={e => {
-            this.setState({editing: false});
-            this.resetValue()
-          }}
-        />
-      </div>
-    }
-    else {
-      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
-
-      return <input
-        spellCheck="false"
-        className="maputnik-number"
-        placeholder={this.props.default}
-        value={value === undefined ? "" : value}
-        onChange={e => this.changeValue(e.target.value)}
-        onFocus={() => {
-          this.setState({editing: true});
-        }}
-        onBlur={this.resetValue}
-        required={this.props.required}
-      />
-    }
-  }
-}
-
-export default NumberInput

src/components/inputs/SelectInput.jsx

@@ -1,34 +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,
-    options: PropTypes.array.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    title: PropTypes.string,
-  }
-
-
-  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}
-      title={this.props.title}
-      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/SpecDoc.js

@@ -1,83 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class SpecDoc extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object.isRequired,
-  }
-
-  render () {
-    const {fieldSpec} = this.props;
-
-    const {doc, values} = fieldSpec;
-    const sdkSupport = fieldSpec['sdk-support'];
-
-    const headers = {
-      js: "JS",
-      android: "Android",
-      ios: "iOS",
-      macos: "macOS",
-    };
-
-    const renderValues = (
-      !!values &&
-      // HACK: Currently we merge additional values into the stylespec, so this is required
-      // See <https://github.com/maputnik/editor/blob/master/src/components/fields/PropertyGroup.jsx#L16>
-      !Array.isArray(values)
-    );
-
-    return (
-      <>
-        {doc && 
-          <div className="SpecDoc">
-            <div className="SpecDoc__doc">{doc}</div>
-            {renderValues &&
-              <ul className="SpecDoc__values">
-                {Object.entries(values).map(([key, value]) => {
-                  return (
-                    <li key={key}>
-                      <code>{JSON.stringify(key)}</code>
-                      <div>{value.doc}</div>
-                    </li>
-                  );
-                })}
-              </ul>
-            }
-          </div>
-        }
-        {sdkSupport &&
-          <div className="SpecDoc__sdk-support">
-            <table className="SpecDoc__sdk-support__table">
-              <thead>
-                <tr>
-                  <th></th>
-                  {Object.values(headers).map(header => {
-                    return <th key={header}>{header}</th>;
-                  })}
-                </tr>
-              </thead>
-              <tbody>
-                {Object.entries(sdkSupport).map(([key, supportObj]) => {
-                  return (
-                    <tr key={key}>
-                      <td>{key}</td>
-                      {Object.keys(headers).map(k => {
-                        const value = supportObj[k];
-                        if (supportObj.hasOwnProperty(k)) {
-                          return <td key={k}>{supportObj[k]}</td>;
-                        }
-                        else {
-                          return <td key={k}>no</td>;
-                        }
-                      })}
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        }
-      </>
-    );
-  }
-}

src/components/inputs/StringInput.jsx

@@ -1,93 +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,
-    onInput: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    spellCheck: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onInput: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      editing: false,
-      value: props.value || ''
-    }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    if (!state.editing) {
-      return {
-        value: props.value
-      };
-    }
-    return {};
-  }
-
-  render() {
-    let tag;
-    let classes;
-
-    if(!!this.props.multi) {
-      tag = "textarea"
-      classes = [
-        "maputnik-string",
-        "maputnik-string--multi"
-      ]
-    }
-    else {
-      tag = "input"
-      classes = [
-        "maputnik-string"
-      ]
-    }
-
-    if(!!this.props.disabled) {
-      classes.push("maputnik-string--disabled");
-    }
-
-    return React.createElement(tag, {
-      "data-wd-key": this.props["data-wd-key"],
-      spellCheck: this.props.hasOwnProperty("spellCheck") ? this.props.spellCheck : !(tag === "input"),
-      disabled: this.props.disabled,
-      className: classes.join(" "),
-      style: this.props.style,
-      value: this.state.value === undefined ? "" : this.state.value,
-      placeholder: this.props.default,
-      onChange: e => {
-        this.setState({
-          editing: true,
-          value: e.target.value
-        }, () => {
-          this.props.onInput(this.state.value);
-        });
-      },
-      onBlur: () => {
-        if(this.state.value!==this.props.value) {
-          this.setState({editing: false});
-          this.props.onChange(this.state.value);
-        }
-      },
-      onKeyDown: (e) => {
-        if (e.keyCode === 13) {
-          this.props.onChange(this.state.value);
-        }
-      },
-      required: this.props.required,
-    });
-  }
-}
-
-export default StringInput

src/components/inputs/UrlInput.jsx

@@ -1,77 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import StringInput from './StringInput'
-import SmallError from '../util/SmallError'
-
-
-function validate (url) {
-  let error;
-  const getProtocol = (url) => {
-    try {
-      const urlObj = new URL(url);
-      return urlObj.protocol;
-    }
-    catch (err) {
-      return undefined;
-    }
-  };
-  const protocol = getProtocol(url);
-  if (
-    protocol &&
-    protocol === "http:" &&
-    window.location.protocol === "https:"
-  ) {
-    error = (
-      <SmallError>
-        CORS policy won&apos;t allow fetching resources served over http from https, use a <code>https://</code> domain
-      </SmallError>
-    );
-  }
-
-  return error;
-}
-
-class UrlInput extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    onInput: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onInput: () => {},
-  }
-
-  constructor (props) {
-    super(props);
-    this.state = {
-      error: validate(props.value)
-    };
-  }
-
-  onInput = (url) => {
-    this.setState({
-      error: validate(url)
-    });
-    this.props.onInput(url);
-  }
-
-  render () {
-    return (
-      <div>
-        <StringInput
-          {...this.props}
-          onInput={this.onInput}
-        />
-        {this.state.error}
-      </div>
-    );
-  }
-}
-
-export default UrlInput

src/components/layers/Collapse.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Collapse from 'react-collapse'
-import accessibility from '../../libs/accessibility'
-
-
-export default class CollapseAlt extends React.Component {
-  static propTypes = {
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired
-  }
-
-  static defaultProps = {
-    isActive: true
-  }
-
-  render() {
-    if (accessibility.reducedMotionEnabled()) {
-      return (
-        <div style={{display: this.props.isActive ? "block" : "none"}}>
-          {this.props.children}
-        </div>
-      )
-    }
-    else {
-      return (
-        <Collapse isOpened={this.props.isActive}>
-          {this.props.children}
-        </Collapse>
-      )
-    }
-  }
-}
-

src/components/layers/Collapser.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
-
-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 ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
-  }
-}
-

src/components/layers/CommentBlock.jsx

@@ -1,33 +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() {
-    const fieldSpec = {
-      doc: "Comments for the current layer. This is non-standard and not in the spec."
-    };
-
-    return <InputBlock
-      label={"Comments"}
-      fieldSpec={fieldSpec}
-      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,161 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames';
-
-import InputBlock from '../inputs/InputBlock'
-import StringInput from '../inputs/StringInput'
-import CodeMirror from 'codemirror';
-
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/addon/lint/lint'
-import 'codemirror/addon/edit/matchbrackets'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/addon/lint/lint.css'
-import jsonlint from 'jsonlint'
-import stringifyPretty from 'json-stringify-pretty-compact'
-import '../util/codemirror-mgl';
-
-
-class JSONEditor extends React.Component {
-  static propTypes = {
-    layer: PropTypes.any.isRequired,
-    maxHeight: PropTypes.number,
-    onChange: PropTypes.func,
-    lineNumbers: PropTypes.bool,
-    lineWrapping: PropTypes.bool,
-    getValue: PropTypes.func,
-    gutters: PropTypes.array,
-    className: PropTypes.string,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onJSONValid: PropTypes.func,
-    onJSONInvalid: PropTypes.func,
-    mode: PropTypes.object,
-    lint: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.object,
-    ]),
-  }
-
-  static defaultProps = {
-    lineNumbers: true,
-    lineWrapping: false,
-    gutters: ["CodeMirror-lint-markers"],
-    getValue: (data) => {
-      return stringifyPretty(data, {indent: 2, maxLength: 40});
-    },
-    onFocus: () => {},
-    onBlur: () => {},
-    onJSONInvalid: () => {},
-    onJSONValid: () => {},
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      isEditing: false,
-      prevValue: this.props.getValue(this.props.layer),
-    };
-  }
-
-  componentDidMount () {
-    this._doc = CodeMirror(this._el, {
-      value: this.props.getValue(this.props.layer),
-      mode: this.props.mode || {
-        name: "mgl",
-      },
-      lineWrapping: this.props.lineWrapping,
-      tabSize: 2,
-      theme: 'maputnik',
-      viewportMargin: Infinity,
-      lineNumbers: this.props.lineNumbers,
-      lint: this.props.lint || {
-        context: "layer"
-      },
-      matchBrackets: true,
-      gutters: this.props.gutters,
-      scrollbarStyle: "null",
-    });
-
-    this._doc.on('change', this.onChange);
-    this._doc.on('focus', this.onFocus);
-    this._doc.on('blur', this.onBlur);
-  }
-
-  onFocus = () => {
-    this.props.onFocus();
-    this.setState({
-      isEditing: true
-    });
-  }
-
-  onBlur = () => {
-    this.props.onBlur();
-    this.setState({
-      isEditing: false
-    });
-  }
-
-  componentWillUnMount () {
-    this._doc.off('change', this.onChange);
-    this._doc.off('focus', this.onFocus);
-    this._doc.off('blur', this.onBlur);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
-      this._cancelNextChange = true;
-      this._doc.setValue(
-        this.props.getValue(this.props.layer),
-      )
-    }
-  }
-
-  onChange = (e) => {
-    if (this._cancelNextChange) {
-      this._cancelNextChange = false;
-      this.setState({
-        prevValue: this._doc.getValue(),
-      })
-      return;
-    }
-    const newCode = this._doc.getValue();
-
-    if (this.state.prevValue !== newCode) {
-      let parsedLayer, err;
-      try {
-        parsedLayer = JSON.parse(newCode);
-      } catch(_err) {
-        err = _err;
-        console.warn(_err)
-      }
-
-      if (err) {
-        this.props.onJSONInvalid();
-      }
-      else {
-        this.props.onChange(parsedLayer)
-        this.props.onJSONValid();
-      }
-    }
-
-    this.setState({
-      prevValue: newCode,
-    });
-  }
-
-  render() {
-    const style = {};
-    if (this.props.maxHeight) {
-      style.maxHeight = this.props.maxHeight;
-    }
-
-    return <div
-      className={classnames("codemirror-container", this.props.className)}
-      ref={(el) => this._el = el}
-      style={style}
-    />
-  }
-}
-
-export default JSONEditor

src/components/layers/LayerEditor.jsx

@@ -1,333 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
-
-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 {Accordion} from 'react-accessible-accordion';
-
-import {MdMoreVert} from 'react-icons/md'
-
-import { changeType, changeProperty } from '../../libs/layer'
-import layout from '../../config/layout.json'
-import {formatLayerId} from '../util/format';
-
-
-function getLayoutForType (type) {
-  return layout[type] ? layout[type] : layout.invalid;
-}
-
-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(getLayoutForType(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,
-    onMoveLayer: PropTypes.func,
-    onLayerDestroy: PropTypes.func,
-    onLayerCopy: PropTypes.func,
-    onLayerVisibilityToggle: PropTypes.func,
-    isFirstLayer: PropTypes.bool,
-    isLastLayer: PropTypes.bool,
-    layerIndex: PropTypes.number,
-    errors: PropTypes.array,
-  }
-
-  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 }
-  }
-
-  static getDerivedStateFromProps(props, state) {
-    const additionalGroups = { ...state.editorGroups }
-
-    getLayoutForType(props.layer.type).groups.forEach(group => {
-      if(!(group.title in additionalGroups)) {
-        additionalGroups[group.title] = true
-      }
-    })
-
-    return {
-      editorGroups: additionalGroups
-    };
-  }
-
-  getChildContext () {
-    return {
-      reactIconBase: {
-        size: 14,
-        color: '#8e8e8e',
-      }
-    }
-  }
-
-  changeProperty(group, property, newValue) {
-    this.props.onLayerChanged(
-      this.props.layerIndex,
-      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']
-    }
-    const {errors, layerIndex} = this.props;
-
-    const errorData = {};
-    errors.forEach(error => {
-      if (
-        error.parsed &&
-        error.parsed.type === "layer" &&
-        error.parsed.data.index == layerIndex
-      ) {
-        errorData[error.parsed.data.key] = {
-          message: error.parsed.data.message
-        };
-      }
-    })
-
-    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"
-          error={errorData.id}
-          onChange={newId => this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
-        />
-        <LayerTypeBlock
-          disabled={true}
-          error={errorData.type}
-          value={this.props.layer.type}
-          onChange={newType => this.props.onLayerChanged(
-            this.props.layerIndex,
-            changeType(this.props.layer, newType)
-          )}
-        />
-        {this.props.layer.type !== 'background' && <LayerSourceBlock
-          error={errorData.source}
-          sourceIds={Object.keys(this.props.sources)}
-          value={this.props.layer.source}
-          onChange={v => this.changeProperty(null, 'source', v)}
-        />
-        }
-        {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
-        <LayerSourceLayerBlock
-          error={errorData['source-layer']}
-          sourceLayerIds={sourceLayerIds}
-          value={this.props.layer['source-layer']}
-          onChange={v => this.changeProperty(null, 'source-layer', v)}
-        />
-        }
-        <MinZoomBlock
-          error={errorData.minzoom}
-          value={this.props.layer.minzoom}
-          onChange={v => this.changeProperty(null, 'minzoom', v)}
-        />
-        <MaxZoomBlock
-          error={errorData.maxzoom}
-          value={this.props.layer.maxzoom}
-          onChange={v => this.changeProperty(null, 'maxzoom', v)}
-        />
-        <CommentBlock
-          error={errorData.comment}
-          value={comment}
-          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
-        />
-      </div>
-      case 'filter': return <div>
-        <div className="maputnik-filter-editor-wrapper">
-          <FilterEditor
-            errors={errorData}
-            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
-        errors={errorData}
-        layer={this.props.layer}
-        groupFields={fields}
-        spec={this.props.spec}
-        onChange={this.changeProperty.bind(this)}
-      />
-      case 'jsoneditor': return <JSONEditor
-        layer={this.props.layer}
-        onChange={(layer) => {
-          this.props.onLayerChanged(
-            this.props.layerIndex,
-            layer
-          );
-        }}
-      />
-    }
-  }
-
-  moveLayer(offset) {
-    this.props.onMoveLayer({
-      oldIndex: this.props.layerIndex,
-      newIndex: this.props.layerIndex+offset
-    })
-  }
-
-  render() {
-    const groupIds = [];
-    const layerType = this.props.layer.type
-    const groups = layoutGroups(layerType).filter(group => {
-      return !(layerType === 'background' && group.type === 'source')
-    }).map(group => {
-      const groupId = group.title.replace(/ /g, "_");
-      groupIds.push(groupId);
-      return <LayerEditorGroup
-        data-wd-key={group.title}
-        id={groupId}
-        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>
-    })
-
-    const layout = this.props.layer.layout || {}
-
-    const items = {
-      delete: {
-        text: "Delete",
-        handler: () => this.props.onLayerDestroy(this.props.layerIndex)
-      },
-      duplicate: {
-        text: "Duplicate",
-        handler: () => this.props.onLayerCopy(this.props.layerIndex)
-      },
-      hide: {
-        text: (layout.visibility === "none") ? "Show" : "Hide",
-        handler: () => this.props.onLayerVisibilityToggle(this.props.layerIndex)
-      },
-      moveLayerUp: {
-        text: "Move layer up",
-        // Not actually used...
-        disabled: this.props.isFirstLayer,
-        handler: () => this.moveLayer(-1)
-      },
-      moveLayerDown: {
-        text: "Move layer down",
-        // Not actually used...
-        disabled: this.props.isLastLayer,
-        handler: () => this.moveLayer(+1)
-      }
-    }
-
-    function handleSelection(id, event) {
-      event.stopPropagation;
-      items[id].handler();
-    }
-
-    return <div className="maputnik-layer-editor"
-      >
-      <header>
-        <div className="layer-header">
-          <h2 className="layer-header__title">
-            Layer: {formatLayerId(this.props.layer.id)}
-          </h2>
-          <div className="layer-header__info">
-            <Wrapper
-              className='more-menu'
-              onSelection={handleSelection}
-              closeOnSelection={false}
-            >
-              <Button className='more-menu__button'>
-                <MdMoreVert className="more-menu__button__svg" />
-              </Button>
-              <Menu>
-                <ul className="more-menu__menu">
-                  {Object.keys(items).map((id, idx) => {
-                    const item = items[id];
-                    return <li key={id}>
-                      <MenuItem value={id} className='more-menu__menu__item'>
-                        {item.text}
-                      </MenuItem>
-                    </li>
-                  })}
-                </ul>
-              </Menu>
-            </Wrapper>
-          </div>
-        </div>
-
-      </header>
-      <Accordion
-        allowMultipleExpanded={true}
-        allowZeroExpanded={true}
-        preExpanded={groupIds}
-      >
-        {groups}
-      </Accordion>
-    </div>
-  }
-}

src/components/layers/LayerEditorGroup.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Icon from '@mdi/react'
-import {
-  mdiMenuDown,
-  mdiMenuUp
-} from '@mdi/js';
-import {
-    AccordionItem,
-    AccordionItemHeading,
-    AccordionItemButton,
-    AccordionItemPanel,
-} from 'react-accessible-accordion';
-
-
-export default class LayerEditorGroup extends React.Component {
-  static propTypes = {
-    "id": PropTypes.string,
-    "data-wd-key": PropTypes.string,
-    title: PropTypes.string.isRequired,
-    isActive: PropTypes.bool.isRequired,
-    children: PropTypes.element.isRequired,
-    onActiveToggle: PropTypes.func.isRequired
-  }
-
-  render() {
-    return <AccordionItem uuid={this.props.id}>
-      <AccordionItemHeading className="maputnik-layer-editor-group"
-        data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
-        onClick={e => this.props.onActiveToggle(!this.props.isActive)}
-      >
-        <AccordionItemButton className="maputnik-layer-editor-group__button">
-          <span style={{flexGrow: 1}}>{this.props.title}</span>
-          <Icon
-            path={mdiMenuUp}
-            size={1}
-            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--up"
-          />
-          <Icon
-            path={mdiMenuDown}
-            size={1}
-            className="maputnik-layer-editor-group__button__icon maputnik-layer-editor-group__button__icon--down"
-          />
-        </AccordionItemButton>
-      </AccordionItemHeading>
-      <AccordionItemPanel>
-        {this.props.children}
-      </AccordionItemPanel>
-    </AccordionItem>
-  }
-}

src/components/layers/LayerIdBlock.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {latest} from '@mapbox/mapbox-gl-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,
-    error: PropTypes.object,
-  }
-
-  render() {
-    return <InputBlock label={"ID"} fieldSpec={latest.layer.id}
-      data-wd-key={this.props.wdKey}
-      error={this.props.error}
-    >
-      <StringInput
-        value={this.props.value}
-        onChange={this.props.onChange}
-      />
-    </InputBlock>
-  }
-}
-
-export default LayerIdBlock

src/components/layers/LayerList.jsx

@@ -1,306 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import lodash from 'lodash';
-
-import LayerListGroup from './LayerListGroup'
-import LayerListItem from './LayerListItem'
-import AddModal from '../modals/AddModal'
-
-import {SortableContainer} 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
-class LayerListContainer extends React.Component {
-  static propTypes = {...layerListPropTypes}
-  static defaultProps = {
-    onLayerSelect: () => {},
-  }
-
-  constructor(props) {
-    super(props);
-    this.selectedItemRef = React.createRef();
-    this.scrollContainerRef = React.createRef();
-    this.state = {
-      collapsedGroups: {},
-      areAllGroupsExpanded: false,
-      isOpen: {
-        add: false,
-      }
-    }
-  }
-
-  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
-  }
-
-  shouldComponentUpdate (nextProps, nextState) {
-    // Always update on state change
-    if (this.state !== nextState) {
-      return true;
-    }
-
-    // This component tree only requires id and visibility from the layers
-    // objects
-    function getRequiredProps (layer) {
-      const out = {
-        id: layer.id,
-      };
-
-      if (layer.layout) {
-        out.layout = {
-          visibility: layer.layout.visibility
-        };
-      }
-      return out;
-    }
-    const layersEqual = lodash.isEqual(
-      nextProps.layers.map(getRequiredProps),
-      this.props.layers.map(getRequiredProps),
-    );
-
-    function withoutLayers (props) {
-      const out = {
-        ...props
-      };
-      delete out['layers'];
-      return out;
-    }
-
-    // Compare the props without layers because we've already compared them
-    // efficiently above.
-    const propsEqual = lodash.isEqual(
-      withoutLayers(this.props),
-      withoutLayers(nextProps)
-    );
-
-    const propsChanged = !(layersEqual && propsEqual);
-    return propsChanged;
-  }
-
-  componentDidUpdate (prevProps) {
-    if (prevProps.selectedLayerIndex !== this.props.selectedLayerIndex) {
-      const selectedItemNode = this.selectedItemRef.current;
-      if (selectedItemNode && selectedItemNode.node) {
-        const target = selectedItemNode.node;
-        const options = {
-          root: this.scrollContainerRef.current,
-          threshold: 1.0
-        }
-        const observer = new IntersectionObserver(entries => {
-          observer.unobserve(target);
-          if (entries.length > 0 && entries[0].intersectionRatio < 1) {
-            target.scrollIntoView();
-          }
-        }, options);
-
-        observer.observe(target);
-      }
-    }
-  }
-
-  render() {
-
-    const listItems = []
-    let idx = 0
-    const layerIdCount = new Map();
-
-    const layersByGroup = this.groupedLayers();
-    layersByGroup.forEach(layers => {
-      const groupPrefix = layerPrefix(layers[0].id)
-      if(layers.length > 1) {
-        const grp = <LayerListGroup
-          data-wd-key={[groupPrefix, idx].join('-')}
-          key={`group-${groupPrefix}-${idx}`}
-          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 layerError = this.props.errors.find(error => {
-          return (
-            error.parsed &&
-            error.parsed.type === "layer" &&
-            error.parsed.data.index == idx
-          );
-        });
-
-        const additionalProps = {};
-        if (idx === this.props.selectedLayerIndex) {
-          additionalProps.ref = this.selectedItemRef;
-        }
-
-        layerIdCount.set(layer.id,
-          layerIdCount.has(layer.id) ? layerIdCount.get(layer.id) + 1 : 0
-        );
-        const key = `${layer.id}-${layerIdCount.get(layer.id)}`;
-        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,
-            'maputnik-layer-list-item--error': !!layerError
-          })}
-          index={idx}
-          key={key}
-          layerId={layer.id}
-          layerIndex={idx}
-          layerType={layer.type}
-          visibility={(layer.layout || {}).visibility}
-          isSelected={idx === this.props.selectedLayerIndex}
-          onLayerSelect={this.props.onLayerSelect}
-          onLayerDestroy={this.props.onLayerDestroy.bind(this)}
-          onLayerCopy={this.props.onLayerCopy.bind(this)}
-          onLayerVisibilityToggle={this.props.onLayerVisibilityToggle.bind(this)}
-          {...additionalProps}
-        />
-        listItems.push(listItem)
-        idx += 1
-      })
-    })
-
-    return <div className="maputnik-layer-list" ref={this.scrollContainerRef}>
-      <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">
-            <button
-              id="skip-menu"
-              onClick={this.toggleLayers}
-              className="maputnik-button">
-              {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
-            </button>
-          </div>
-        </div>
-        <div className="maputnik-default-property">
-          <div className="maputnik-multibutton">
-            <button
-              onClick={this.toggleModal.bind(this, 'add')}
-              data-wd-key="layer-list:add-layer"
-              className="maputnik-button maputnik-button-selected">
-             Add Layer
-            </button>
-          </div>
-        </div>
-      </header>
-      <ul className="maputnik-layer-list-container">
-        {listItems}
-      </ul>
-    </div>
-  }
-}
-
-const LayerListContainerSortable = SortableContainer((props) => <LayerListContainer {...props} />)
-
-export default class LayerList extends React.Component {
-  static propTypes = {...layerListPropTypes}
-
-  render() {
-    return <LayerListContainerSortable
-      {...this.props}
-      helperClass='sortableHelper'
-      onSortEnd={this.props.onMoveLayer.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,135 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-
-import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
-
-import LayerIcon from '../icons/LayerIcon'
-import {SortableElement, SortableHandle} from 'react-sortable-hoc'
-
-
-const DraggableLabel = SortableHandle((props) => {
-  return <div className="maputnik-layer-list-item-handle">
-    <LayerIcon
-      className="layer-handle__icon"
-      type={props.layerType}
-    />
-    <span className="maputnik-layer-list-item-id">{props.layerId}</span>
-  </div>
-});
-
-class IconAction extends React.Component {
-  static propTypes = {
-    action: PropTypes.string.isRequired,
-    onClick: PropTypes.func.isRequired,
-    wdKey: PropTypes.string,
-    classBlockName: PropTypes.string,
-    classBlockModifier: PropTypes.string,
-  }
-
-  renderIcon() {
-    switch(this.props.action) {
-      case 'duplicate': return <MdContentCopy />
-      case 'show': return <MdVisibility />
-      case 'hide': return <MdVisibilityOff />
-      case 'delete': return <MdDelete />
-    }
-  }
-
-  render() {
-    const {classBlockName, classBlockModifier} = this.props;
-
-    let classAdditions = '';
-    if (classBlockName) {
-      classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
-
-      if (classBlockModifier) {
-        classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
-      }
-    }
-
-    return <button
-      tabIndex="-1"
-      title={this.props.action}
-      className={`maputnik-layer-list-icon-action ${classAdditions}`}
-      data-wd-key={this.props.wdKey}
-      onClick={this.props.onClick}
-    >
-      {this.renderIcon()}
-    </button>
-  }
-}
-
-class LayerListItem extends React.Component {
-  static propTypes = {
-    layerIndex: PropTypes.number.isRequired,
-    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() {
-    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
-
-    return <li
-      key={this.props.layerId}
-      onClick={e => this.props.onLayerSelect(this.props.layerIndex)}
-      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,
-      })}>
-        <DraggableLabel {...this.props} />
-        <span style={{flexGrow: 1}} />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":delete"}
-          action={'delete'}
-          classBlockName="delete"
-          onClick={e => this.props.onLayerDestroy(this.props.layerIndex)}
-        />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":copy"}
-          action={'duplicate'}
-          classBlockName="duplicate"
-          onClick={e => this.props.onLayerCopy(this.props.layerIndex)}
-        />
-        <IconAction
-          wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={visibilityAction}
-          classBlockName="visibility"
-          classBlockModifier={visibilityAction}
-          onClick={e => this.props.onLayerVisibilityToggle(this.props.layerIndex)}
-        />
-    </li>
-  }
-}
-
-const LayerListItemSortable = SortableElement((props) => <LayerListItem {...props} />);
-
-export default LayerListItemSortable;

src/components/layers/LayerSourceBlock.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {latest} from '@mapbox/mapbox-gl-style-spec'
-import InputBlock from '../inputs/InputBlock'
-import AutocompleteInput from '../inputs/AutocompleteInput'
-
-class LayerSourceBlock extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    wdKey: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceIds: PropTypes.array,
-    error: PropTypes.object,
-  }
-
-  static defaultProps = {
-    onChange: () => {},
-    sourceIds: [],
-  }
-
-  render() {
-    return <InputBlock
-      label={"Source"}
-      fieldSpec={latest.layer.source}
-      error={this.props.error}
-      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,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import {latest} from '@mapbox/mapbox-gl-style-spec'
-import InputBlock from '../inputs/InputBlock'
-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"} fieldSpec={latest.layer['source-layer']}
-      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