more review comments

This is in continue to:
- #850
- #848

The last files should be converted as part of this PR, there are only a
handful left.

.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["env", "react"],
-  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
-}

.codesandbox/ci.json

@@ -0,0 +1,4 @@
+{
+  "packages": [],
+  "sandboxes": ["/"]
+}

.dockerignore

@@ -0,0 +1,45 @@
+.git
+.gitignore
+Dockerfile
+
+#
+#
+#     COPIED FROM .gitignore , please keep it in sync
+#
+#
+
+# 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

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+      'eslint:recommended',
+      'plugin:react/recommended',
+      'plugin:react/jsx-runtime',
+      'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', '.eslintrc.cjs'],
+    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+    settings: { react: { version: '18.2' } },
+    plugins: ['react-refresh'],
+    rules: {
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,27 @@
+---
+name: Bug report
+about: Create a report to help us improve Maputnik
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!-- Thanks for your feedback! Please complete the following information: -->
+
+**Maputnik version**:<!-- e.g v1.7.0, main -->
+**Browser**:
+**OS**:<!-- (Windows, macOS, Linux) -->
+
+**Description of the bug**:
+
+**Steps to reproduce the behavior**:
+1.
+2.
+3.
+
+**Style file or style URL**:
+<!-- If applicable, attach a style file (zip) or provide a style URL. -->
+
+**Screenshots**:
+<!-- If applicable, add screenshots to help explain your problem. -->

.github/ISSUE_TEMPLATE/other-issue.md

@@ -0,0 +1,11 @@
+---
+name: Other issue
+about: Feature request or other issue which is no bug report
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!-- Thanks for reaching out! If you are having general Maputnik mapping questions, please asking them at https://gis.stackexchange.com/ using the 'maputnik' tag https://gis.stackexchange.com/questions/tagged/maputnik and read https://gis.stackexchange.com/help/how-to-ask before you do so (please keep in mind that you're asking there in a general GIS forum, not a dedicated support channel) -->
+

.github/dependabot.yml

@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 2
+    versioning-strategy: increase
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    open-pull-requests-limit: 2
+    versioning-strategy: increase

.github/workflows/ci.yml

@@ -0,0 +1,134 @@
+name: ci
+
+on:
+  pull_request:
+    branches: [ main ]
+  push:
+    branches: [ main ]
+
+jobs:
+  build-docker:
+    name: build docker
+    runs-on: ubuntu-latest
+
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    steps:
+    - uses: actions/checkout@v4
+    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
+
+  # build the editor
+  build-node:
+    name: "build on ${{ matrix.os }}"
+    runs-on: ${{ matrix.os }}
+
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+    - run: npm ci
+    - run: npm run build
+
+
+  build-artifacts:
+    name: "build artifacts"
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+    - run: npm ci
+    - run: npm run build
+    - run: npm run build-storybook
+    - name: artifacts/editor
+      uses: actions/upload-artifact@v1
+      with:
+        name: editor
+        path: dist
+    - name: artifacts/storybook
+      uses: actions/upload-artifact@v1
+      with:
+        name: storybook
+        path: build/storybook
+
+    # Build and upload desktop CLI artifacts
+    - name: Set up Go
+      uses: actions/setup-go@v3
+      with:
+        go-version: ^1.19.x
+      id: go
+
+    - name: Check out code into the Go module directory
+      uses: actions/checkout@v4
+      with:
+        repository: maputnik/desktop
+        ref: master
+        path: ./src/github.com/maputnik/desktop/
+
+    - name: Make
+      run: cd src/github.com/maputnik/desktop/ && make
+
+    - name: Artifacts/linux
+      uses: actions/upload-artifact@v1
+      with:
+        name: maputnik-linux
+        path: ./src/github.com/maputnik/desktop/bin/linux/
+
+    - name: Artifacts/darwin
+      uses: actions/upload-artifact@v1
+      with:
+        name: maputnik-darwin
+        path: ./src/github.com/maputnik/desktop/bin/darwin/
+
+    - name: Artifacts/windows
+      uses: actions/upload-artifact@v1
+      with:
+        name: maputnik-windows
+        path: ./src/github.com/maputnik/desktop/bin/windows/
+  
+  e2e-tests:
+    name: "E2E tests using ${{ matrix.browser }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chrome, firefox]
+
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - run: npm ci
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          build: npm run build
+          start: npm run start
+          browser: ${{ matrix.browser }}
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          files: ${{ github.workspace }}/.nyc_output/out.json
+          verbose: true

.github/workflows/deploy.yml

@@ -0,0 +1,26 @@
+name: deploy
+
+on:
+  push:
+    branches: [ main ]
+    tags:
+    - 'v*'
+
+jobs:
+  # publish docker to GitHub registry
+  deploy-docker:
+    name: deploy/docker
+    runs-on: ${{ matrix.os }}
+
+    if: ${{ github.event_name == 'push' }}
+
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+
+    steps:
+    - uses: actions/checkout@v4
+    - run: echo "${{ secrets.GITHUB_TOKEN }}" | docker login docker.pkg.github.com -u orangemug --password-stdin
+    - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
+    - run: docker push docker.pkg.github.com/maputnik/editor/editor:main

.gitignore

@@ -14,6 +14,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+.nyc_output
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
@@ -30,3 +31,8 @@ node_modules
 
 # Ignore build files
 public
+/errorShots
+/old
+/build
+/cypress/screenshots
+/dist/

.nvmrc

@@ -0,0 +1 @@
+18.19

.nycrc.json

@@ -0,0 +1,18 @@
+{
+  "all": true,
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "check-coverage": false,
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "cypress/**/*.*",
+    "**/*.d.ts",
+    "**/*.cy.tsx",
+    "**/*.cy.ts",
+    "./coverage/**",
+    "./cypress/**",
+    "./dist/**",
+    "node_modules"
+  ],
+  "report-dir": "coverage",
+  "reporter": ["json", "lcov", "json-summary"]
+}

.storybook/main.js

@@ -0,0 +1,9 @@
+const config = {
+  stories: ['../stories/**/*.stories.jsx'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y/register', '@storybook/addon-storysource'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  }
+};
+export default config;

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import { themes } from '@storybook/theming';
+import theme from './maputnik.theme';
+
+addons.setConfig({
+  theme: theme,
+});

.storybook/maputnik.theme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+
+  brandTitle: 'Maputnik',
+  brandUrl: 'https://github.com/maputnik/editor',
+});

.topissuesrc

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

.travis.yml

@@ -1,41 +0,0 @@
-language: node_js
-addons:
-  firefox: latest
-matrix:
-  include:
-    - os: linux
-      node_js: "6"
-    - os: linux
-      env: CXX=g++-4.8
-      node_js: "7"
-    - os: linux
-      node_js: "8"
-    - os: linux
-      env: CXX=g++-4.8
-      node_js: "9"
-    - os: osx
-      node_js: "6"
-    - os: osx
-      node_js: "7"
-    - os: osx
-      node_js: "8"
-    - os: osx
-      node_js: "9"
-before_install:
-  - export CHROME_BIN=chromium-browser
-  - export DISPLAY=:99.0
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]]; then sh -e /etc/init.d/xvfb start; fi
-install:
-  - npm install
-script:
-  - mkdir public
-  - node --stack_size=100000 $(which npm) run build
-  - npm run lint
-  - npm run lint-styles
-  - npm run test
-addons:
-  apt:
-    sources:
-      - ubuntu-toolchain-r-test
-    packages:
-      - g++-4.8

Dockerfile

@@ -1,15 +1,22 @@
-FROM nodesource/xenial:6.1.0
+FROM node:18 as builder
+WORKDIR /maputnik
 
-EXPOSE 8888
+# Only copy package.json to prevent npm install from running on every build
+COPY package.json package-lock.json ./
+RUN npm install
 
-ENV HOME /maputnik
-RUN mkdir ${HOME}
-
-COPY . ${HOME}/
-
-WORKDIR ${HOME}
-
-RUN npm install -d --dev
+# Build maputnik
+# TODO:  we should also do a   npm run test   here (needs more dependencies)
+COPY . .
 RUN npm run build
 
-CMD npm run start -- --host 0.0.0.0
+#---------------------------------------------------------------------------
+
+# Create a clean python-based image with just the build results
+FROM python:3-slim
+WORKDIR /maputnik
+
+COPY --from=builder /maputnik/dist .
+
+EXPOSE 8888
+CMD python -m http.server 8888

README.md

@@ -1,26 +1,29 @@
-# Maputnik
+<img width="200" alt="Maputnik logo" src="https://cdn.jsdelivr.net/gh/maputnik/design/logos/logo-color.png" />
 
-[![Build Status](https://travis-ci.org/maputnik/editor.svg?branch=master)][travis]
-[![Windows Build Status](https://ci.appveyor.com/api/projects/status/anelbgv6jdb3qnh9/branch/master?svg=true)][appveyor]
-[![Dependency Status](https://david-dm.org/maputnik/editor.svg)][dm-prod]
-[![Dev Dependency Status](https://david-dm.org/maputnik/editor/dev-status.svg)][dm-dev]
+# Maputnik
+[![GitHub CI status](https://github.com/maputnik/editor/workflows/ci/badge.svg)][github-action-ci]
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)][license]
 
-[travis]:      https://travis-ci.org/maputnik/editor
-[appveyor]:    https://ci.appveyor.com/project/lukasmartinelli/editor
-[dm-prod]:     https://david-dm.org/maputnik/editor
-[dm-dev]:      https://david-dm.org/maputnik/editor#info=devDependencies
-[license]:     https://tldrlegal.com/license/mit-license
+[github-action-ci]: https://github.com/maputnik/editor/actions?query=workflow%3Aci
+[license]:          https://tldrlegal.com/license/mit-license
 
-<img width="200" align="right" alt="Maputnik" src="src/img/maputnik.png" />
-
-A free and open visual editor for the [Mapbox GL styles](https://www.mapbox.com/mapbox-gl-style-spec/)
+A free and open visual editor for the [MapLibre GL styles](https://maplibre.org/maplibre-style-spec/)
 targeted at developers and map designers.
 
+
+## Usage
+
 - :link: Design your maps online at **<https://maputnik.github.io/editor/>** (all in local storage)
 - :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
+- In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
 
-Mapbox has built one of the best and most amazing OSS ecosystems. A key component to ensure its longevity and independance is an OSS map designer.
+```bash
+docker run -it --rm -p 8888:8888 maputnik/editor
+```
+
+## Donations
+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.
+If you or your organisation has seen value from Maputnik, please consider donating at <https://maputnik.github.io/donate>
 
 ## Documentation
 
@@ -33,12 +36,9 @@ The documentation can be found in the [Wiki](https://github.com/maputnik/editor/
 
 ## 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/).
+Maputnik is written in ES6 and is using [React](https://github.com/facebook/react) and [MapLibre GL JS](https://maplibre.org/projects/maplibre-gl-js/).
 
-We ensure building and developing Maputnik works with
-
-- Linux, OSX and Windows
-- Node >4
+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/`.
 
@@ -46,15 +46,17 @@ Install the deps, start the dev server and open the web browser on `http://local
 # install dependencies
 npm install
 # start dev server
-npm start
+npm run start
 ```
 
-The build process will watch for changes to the filesystem, rebuild and autoreload the editor. However note this from the webpack-dev-server docs
+If you want Maputnik to be accessible externally use the [`--host` option](https://vitejs.dev/config/server-options.html#server-host):
 
-> webpack uses the file system to get notified of file changes. In some cases this does not work. For example, when using Network File System (NFS). Vagrant also has a lot of problems with this. 
-Snippet from <https://webpack.js.org/configuration/dev-server/#devserver-watchoptions->
+```bash
+# start externally accessible dev server
+npm run start -- --host 0.0.0.0
+```
 
-To enable polling add `export WEBPACK_DEV_SERVER_POLLING=1` to your enviroment.
+The build process will watch for changes to the filesystem, rebuild and autoreload the editor.
 
 ```
 npm run build
@@ -68,9 +70,34 @@ npm run lint
 npm run lint-styles
 ```
 
+
+## Tests
+For E2E testing we use [Cypress](https://www.cypress.io/)
+
+ [Cypress](https://www.cypress.io/) doesn't starts a server so you'll need to start one manually by running `npm run start`.
+
+Now open a terminal and run the following using *chrome*:
+
+```
+npm run test
+```
+or *firefox*:
+```
+npm run test -- --browser firefox
+```
+
+See the following docs for more info: (Launching Browsers)[https://docs.cypress.io/guides/guides/launching-browsers]
+
+You can also see the tests as they run or select which suites to run by executing:
+
+```
+npm run cy:open
+```
+
+
 ## 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. 
+- [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
 
@@ -83,13 +110,13 @@ Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter
 - [Terranodo](http://terranodo.io/)
 
 <a href="https://getwemap.com/">
-  <img width="33%" alt="Wemap" style="display:inline" src="media/sponsors/wemap.jpg" />
+  <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="media/sponsors/terranodo.png" />
+  <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="media/sponsors/orbicon_informatik.png" />
+  <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/>
@@ -101,13 +128,13 @@ Thanks to the supporters of the **[Kickstarter campaign](https://www.kickstarter
 - [Dreipol](https://www.dreipol.ch/)
 
 <a href="https://www.klokantech.com/">
-  <img width="18%" alt="Klokan Technologies" style="display:inline-block" src="media/sponsors/klokantech.png" />
+  <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="media/sponsors/geofabrik.png" />
+  <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="media/sponsors/dreipol.png" />
+  <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/>
@@ -130,6 +157,5 @@ Sina Martinelli, Nicholas Doiron, Neil Cawse, Urs42, Benedikt Groß, Manuel Roth
 
 Maputnik is [licensed under MIT](LICENSE) and is Copyright (c) Lukas Martinelli and contributors.
 
-**Disclaimer** This project is not affiliated with Mapbox or Mapbox Studio. It is a independent style editor for the
-open source technology in the Mapbox GL ecosystem.
+**Disclaimer** This is an independent style editor.
 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,19 +0,0 @@
-environment:
-  matrix:
-    - nodejs_version: "6"
-    - nodejs_version: "7"
-    - nodejs_version: "8"
-    - nodejs_version: "9"
-platform:
-  - x86
-  - x64
-install:
-  - ps: Install-Product node $env:nodejs_version
-  - md public
-  - npm install --global --production windows-build-tools
-  - npm install
-build_script:
-  - npm run build
-test_script:
-  - npm run lint
-  - npm test

circle.yml

@@ -1,6 +0,0 @@
-machine:
-  node:
-    version: 6
-test:
-  post:
-    - npm run build

config/wdio.conf.js

@@ -1,48 +0,0 @@
-var webpack          = require("webpack");
-var WebpackDevServer = require("webpack-dev-server");
-var webpackConfig    = require("./webpack.production.config");
-var testConfig       = require("../test/config/specs");
-
-
-var server;
-
-exports.config = {
-  specs: [
-    './test/specs/**/*.js'
-  ],
-  exclude: [
-  ],
-  maxInstances: 10,
-  capabilities: [{
-    maxInstances: 5,
-    browserName: 'firefox'
-  }],
-  sync: true,
-  logLevel: 'verbose',
-  coloredLogs: true,
-  bail: 0,
-  screenshotPath: './errorShots/',
-  baseUrl: 'http://localhost',
-  waitforTimeout: 10000,
-  connectionRetryTimeout: 90000,
-  connectionRetryCount: 3,
-  services: ['phantomjs'],
-  framework: 'mocha',
-  reporters: ['spec'],
-  phantomjsOpts: {
-    webdriverLogfile: 'phantomjs.log'
-  },
-  mochaOpts: {
-    ui: 'bdd',
-    // Because we don't know how long the initial build will take...
-    timeout: 2*60*1000
-  },
-  onPrepare: function (config, capabilities) {
-    var compiler = webpack(webpackConfig);
-    server = new WebpackDevServer(compiler, {});
-    server.listen(testConfig.port);
-  },
-  onComplete: function(exitCode) {
-    server.close();
-  }
-}

config/webpack.config.js

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

config/webpack.loaders.js

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

config/webpack.production.config.js

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

cypress.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "cypress";
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
+
+export default defineConfig({
+  env: {
+    codeCoverage: {
+      exclude: "cypress/**/*.*",
+    },
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      require("@cypress/code-coverage/task")(on, config);
+      return config;
+    },
+    baseUrl: "http://localhost:8888",
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+  },
+});

cypress/e2e/accessibility.cy.ts

@@ -0,0 +1,40 @@
+import MaputnikDriver from "./driver";
+
+describe("accessibility", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+
+  describe("skip links", () => {
+    beforeEach(() => {
+      when.setStyle("layer");
+    });
+
+    it("skip link to layer list", () => {
+      const selector = "root:skip:layer-list";
+      should.exist(selector);
+      when.tab();
+      should.beFocused(selector);
+      when.click(selector);
+      should.beFocused("skip-target-layer-list");
+    });
+
+    // This fails for some reason only in Chrome, but passes in firefox. Adding a skip here to allow merge and later on we'll decide if we want to fix this or not.
+    it.skip("skip link to layer editor", () => {
+      const selector = "root:skip:layer-editor";
+      should.exist(selector);
+      when.tab().tab();
+      should.beFocused(selector);
+      when.click(selector);
+      should.beFocused("skip-target-layer-editor");
+    });
+
+    it("skip link to map view", () => {
+      const selector = "root:skip:map-view";
+      should.exist(selector);
+      when.tab().tab().tab();
+      should.beFocused(selector);
+      when.click(selector);
+      should.canvasBeFocused();
+    });
+  });
+});

cypress/e2e/driver.ts

@@ -0,0 +1,210 @@
+import { CypressHelper } from "@shellygo/cypress-test-utils";
+import { v1 as uuid } from "uuid";
+export default class MaputnikDriver {
+  private helper = new CypressHelper({ defaultDataAttribute: "data-wd-key" });
+  public beforeAndAfter = () => {
+    beforeEach(() => {
+      this.given.setupInterception();
+      this.when.setStyle("both");
+    });
+  };
+
+  public given = {
+    setupInterception: () => {
+      cy.intercept("GET", "http://localhost:8888/example-style.json", {
+        fixture: "example-style.json",
+      }).as("example-style.json");
+      cy.intercept("GET", "http://localhost:8888/example-layer-style.json", {
+        fixture: "example-layer-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/geojson-style.json", {
+        fixture: "geojson-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/raster-style.json", {
+        fixture: "raster-style.json",
+      });
+      cy.intercept("GET", "http://localhost:8888/geojson-raster-style.json", {
+        fixture: "geojson-raster-style.json",
+      });
+      cy.intercept({ method: "GET", url: "*example.local/*" }, []);
+      cy.intercept({ method: "GET", url: "*example.com/*" }, []);
+    },
+  };
+
+  public when = {
+    within: (selector: string, fn: () => void) => {
+      this.helper.when.within(fn, selector);
+    },
+    tab: () => cy.get("body").tab(),
+    waitForExampleFileRequset: () => {
+      this.helper.when.waitForResponse("example-style.json");
+    },
+    chooseExampleFile: () => {
+      cy.get("input[type='file']").selectFile(
+        "cypress/fixtures/example-style.json",
+        { force: true }
+      );
+    },
+    setStyle: (
+      styleProperties: "geojson" | "raster" | "both" | "layer" | "",
+      zoom?: number
+    ) => {
+      let url = "?debug";
+      switch (styleProperties) {
+        case "geojson":
+          url += "&style=http://localhost:8888/geojson-style.json";
+          break;
+        case "raster":
+          url += "&style=http://localhost:8888/raster-style.json";
+          break;
+        case "both":
+          url += "&style=http://localhost:8888/geojson-raster-style.json";
+          break;
+        case "layer":
+          url += "&style=http://localhost:8888/example-layer-style.json";
+          break;
+      }
+      if (zoom) {
+        url += "#" + zoom + "/41.3805/2.1635";
+      }
+      cy.visit("http://localhost:8888/" + url);
+      if (styleProperties) {
+        cy.on("window:confirm", () => true);
+      }
+      cy.get(".maputnik-toolbar-link").should("be.visible");
+    },
+    fillLayersModal: (opts: {type: string, layer?: string, id?: string}) => {
+      var type = opts.type;
+      var layer = opts.layer;
+      var id;
+      if (opts.id) {
+        id = opts.id;
+      } else {
+        id = `${type}:${uuid()}`;
+      }
+
+      cy.get(
+        this.get.dataAttribute("add-layer.layer-type", "select")
+      ).select(type);
+      cy.get(this.get.dataAttribute("add-layer.layer-id", "input")).type(id);
+      if (layer) {
+        cy.get(
+          this.get.dataAttribute("add-layer.layer-source-block", "input")
+        ).type(layer);
+      }
+      this.when.click("add-layer");
+
+      return id;
+    },
+
+    typeKeys: (keys: string) => {
+      cy.get("body").type(keys);
+    },
+
+    click: (selector: string) => {
+      this.helper.when.click(selector);
+    },
+
+    clickZoomin: () => {
+      cy.get(".maplibregl-ctrl-zoom-in").click();
+    },
+
+    selectWithin: (selector: string, value: string) => {
+      this.when.within(selector, () => {
+        cy.get("select").select(value);
+      });
+    },
+
+    select: (selector: string, value: string) => {
+      this.helper.get.element(selector).select(value);
+    },
+
+    focus: (selector: string) => {
+      this.helper.when.focus(selector);
+    },
+
+    setValue: (selector: string, text: string) => {
+      cy.get(selector).clear().type(text, { parseSpecialCharSequences: false });
+    },
+
+    closeModal: (key: string) => {
+      this.helper.when.waitUntil(() => this.helper.get.element(key));
+      this.when.click(key + ".close-modal");
+    },
+
+    openLayersModal: () => {
+      this.helper.when.click("layer-list:add-layer");
+
+      cy.get(this.get.dataAttribute("modal:add-layer")).should("exist");
+      cy.get(this.get.dataAttribute("modal:add-layer")).should("be.visible");
+    },
+  };
+
+  public get = {
+    isMac: () => {
+      return Cypress.platform === "darwin";
+    },
+    styleFromWindow: (win: Window) => {
+      const styleId = win.localStorage.getItem("maputnik:latest_style");
+      const styleItem = win.localStorage.getItem(`maputnik:style:${styleId}`);
+      const obj = JSON.parse(styleItem || "");
+      return obj;
+    },
+    exampleFileUrl: () => {
+      return "http://localhost:8888/example-style.json";
+    },
+    dataAttribute: (key: string, selector?: string): string => {
+      return `*[data-wd-key='${key}'] ${selector || ""}`;
+    },
+  };
+
+  public should = {
+    canvasBeFocused: () => {
+      this.when.within("maplibre:map", () => {
+        cy.get("canvas").should("be.focused");
+      });
+    },
+    notExist: (selector: string) => {
+      cy.get(selector).should("not.exist");
+    },
+    beFocused: (selector: string) => {
+      this.helper.get.element(selector).should("have.focus");
+    },
+
+    notBeFocused: (selector: string) => {
+      this.helper.get.element(selector).should("not.have.focus");
+    },
+
+    beVisible: (selector: string) => {
+      this.helper.get.element(selector).should("be.visible");
+    },
+
+    notBeVisible: (selector: string) => {
+      this.helper.get.element(selector).should("not.be.visible");
+    },
+
+    equalStyleStore: (getter: (obj: any) => any, styleObj: any) => {
+      cy.window().then((win: any) => {
+        const obj = this.get.styleFromWindow(win);
+        assert.deepEqual(getter(obj), styleObj);
+      });
+    },
+
+    styleStoreEqualToExampleFileData: () => {
+      cy.window().then((win: any) => {
+        const obj = this.get.styleFromWindow(win);
+        cy.fixture("example-style.json").should("deep.equal", obj);
+      });
+    },
+
+    exist: (selector: string) => {
+      this.helper.get.element(selector).should("exist");
+    },
+    beSelected: (selector: string, value: string) => {
+      this.helper.get.element(selector).find(`option[value="${value}"]`).should("be.selected");
+    },
+    containText: (selector: string, text: string) => {
+      this.helper.get.element(selector).should("contain.text", text);
+    }
+  };
+}

cypress/e2e/history.cy.ts

@@ -0,0 +1,97 @@
+import MaputnikDriver from "./driver";
+
+describe("history", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+
+  let undoKeyCombo: string;
+  let redoKeyCombo: string;
+
+  before(() => {
+    const isMac = get.isMac();
+    undoKeyCombo = isMac ? "{meta}z" : "{ctrl}z";
+    redoKeyCombo = isMac ? "{meta}{shift}z" : "{ctrl}y";
+  });
+
+  it("undo/redo", () => {
+    when.setStyle("geojson");
+    when.openLayersModal();
+
+    should.equalStyleStore((a: any) => a.layers, []);
+
+    when.fillLayersModal({
+      id: "step 1",
+      type: "background",
+    });
+
+    should.equalStyleStore(
+      (a: any) => a.layers,
+      [
+        {
+          id: "step 1",
+          type: "background",
+        },
+      ]
+    );
+
+    when.openLayersModal();
+    when.fillLayersModal({
+      id: "step 2",
+      type: "background",
+    });
+
+    should.equalStyleStore(
+      (a: any) => a.layers,
+      [
+        {
+          id: "step 1",
+          type: "background",
+        },
+        {
+          id: "step 2",
+          type: "background",
+        },
+      ]
+    );
+
+    when.typeKeys(undoKeyCombo);
+    should.equalStyleStore(
+      (a: any) => a.layers,
+      [
+        {
+          id: "step 1",
+          type: "background",
+        },
+      ]
+    );
+
+    when.typeKeys(undoKeyCombo);
+    should.equalStyleStore((a: any) => a.layers, []);
+
+    when.typeKeys(redoKeyCombo);
+    should.equalStyleStore(
+      (a: any) => a.layers,
+      [
+        {
+          id: "step 1",
+          type: "background",
+        },
+      ]
+    );
+
+    when.typeKeys(redoKeyCombo);
+    should.equalStyleStore(
+      (a: any) => a.layers,
+      [
+        {
+          id: "step 1",
+          type: "background",
+        },
+        {
+          id: "step 2",
+          type: "background",
+        },
+      ]
+    );
+  });
+});

cypress/e2e/keyboard.cy.ts

@@ -0,0 +1,61 @@
+import MaputnikDriver from "./driver";
+
+describe("keyboard", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+  describe("shortcuts", () => {
+    beforeEach(() => {
+      given.setupInterception();
+      when.setStyle("");
+    });
+
+    it("ESC should unfocus", () => {
+      const targetSelector = "maputnik-select";
+      when.focus(targetSelector);
+      should.beFocused(targetSelector);
+
+      when.typeKeys("{esc}");
+      expect(should.notBeFocused(targetSelector));
+    });
+
+    it("'?' should show shortcuts modal", () => {
+      when.typeKeys("?");
+      should.beVisible("modal:shortcuts");
+    });
+
+    it("'o' should show open modal", () => {
+      when.typeKeys("o");
+      should.beVisible("modal:open");
+    });
+
+    it("'e' should show export modal", () => {
+      when.typeKeys("e");
+      should.beVisible("modal:export");
+    });
+
+    it("'d' should show sources modal", () => {
+      when.typeKeys("d");
+      should.beVisible("modal:sources");
+    });
+
+    it("'s' should show settings modal", () => {
+      when.typeKeys("s");
+      should.beVisible("modal:settings");
+    });
+
+    it("'i' should change map to inspect mode", () => {
+      when.typeKeys("i");
+      should.beSelected("nav:inspect", "inspect");
+    });
+
+    it("'m' should focus map", () => {
+      when.typeKeys("m");
+      should.canvasBeFocused();
+    });
+
+    it("'!' should show debug modal", () => {
+      when.typeKeys("!");
+      should.beVisible("modal:debug");
+    });
+  });
+});

cypress/e2e/layers.cy.ts

@@ -0,0 +1,491 @@
+import { v1 as uuid } from "uuid";
+import MaputnikDriver from "./driver";
+
+describe("layers", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+  beforeEach(() => {
+    when.setStyle("both");
+    when.openLayersModal();
+  });
+
+  describe("ops", () => {
+    it("delete", () => {
+      var id = when.fillLayersModal({
+        type: "background",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "background",
+          },
+        ]
+      );
+
+      when.click("layer-list-item:" + id + ":delete");
+
+      should.equalStyleStore((a: any) => a.layers, []);
+    });
+
+    it("duplicate", () => {
+      var styleObj;
+      var id = when.fillLayersModal({
+        type: "background",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "background",
+          },
+        ]
+      );
+
+      when.click("layer-list-item:" + id + ":copy");
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id + "-copy",
+            type: "background",
+          },
+          {
+            id: id,
+            type: "background",
+          },
+        ]
+      );
+    });
+
+    it("hide", () => {
+      var styleObj;
+      var id = when.fillLayersModal({
+        type: "background",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "background",
+          },
+        ]
+      );
+
+      when.click("layer-list-item:" + id + ":toggle-visibility");
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "background",
+            layout: {
+              visibility: "none",
+            },
+          },
+        ]
+      );
+
+      when.click("layer-list-item:" + id + ":toggle-visibility");
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "background",
+            layout: {
+              visibility: "visible",
+            },
+          },
+        ]
+      );
+    });
+  });
+
+  describe("background", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "background",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "background",
+          },
+        ]
+      );
+    });
+
+    describe("modify", () => {
+      function createBackground() {
+        // Setup
+        var id = uuid();
+
+        when.selectWithin("add-layer.layer-type", "background");
+        when.setValue(
+          get.dataAttribute("add-layer.layer-id", "input"),
+          "background:" + id
+        );
+
+        when.click("add-layer");
+
+        should.equalStyleStore(
+          (a: any) => a.layers,
+          [
+            {
+              id: "background:" + id,
+              type: "background",
+            },
+          ]
+        );
+        return id;
+      }
+
+      // ====> THESE SHOULD BE FROM THE SPEC
+      describe("layer", () => {
+        it("expand/collapse");
+        it("id", () => {
+          var bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+
+          var id = uuid();
+          when.setValue(
+            get.dataAttribute("layer-editor.layer-id", "input"),
+            "foobar:" + id
+          );
+          when.click("min-zoom");
+
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "foobar:" + id,
+                type: "background",
+              },
+            ]
+          );
+        });
+
+        it("min-zoom", () => {
+          var bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+          when.setValue(
+            get.dataAttribute("min-zoom", 'input[type="text"]'),
+            "1"
+          );
+
+          when.click("layer-editor.layer-id");
+
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "background:" + bgId,
+                type: "background",
+                minzoom: 1,
+              },
+            ]
+          );
+
+          // AND RESET!
+          // driver.setValue(driver.get.dataAttribute("min-zoom", "input"), "")
+          // driver.click(driver.get.dataAttribute("max-zoom", "input"));
+
+          // driver.isStyleStoreEqual((a: any) => a.layers, [
+          //   {
+          //     "id": 'background:'+bgId,
+          //     "type": 'background'
+          //   }
+          // ]);
+        });
+
+        it("max-zoom", () => {
+          var bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+          when.setValue(
+            get.dataAttribute("max-zoom", 'input[type="text"]'),
+            "1"
+          );
+
+          when.click("layer-editor.layer-id");
+
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "background:" + bgId,
+                type: "background",
+                maxzoom: 1,
+              },
+            ]
+          );
+        });
+
+        it("comments", () => {
+          var bgId = createBackground();
+          var id = uuid();
+
+          when.click("layer-list-item:background:" + bgId);
+          when.setValue(get.dataAttribute("layer-comment", "textarea"), id);
+
+          when.click("layer-editor.layer-id");
+
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "background:" + bgId,
+                type: "background",
+                metadata: {
+                  "maputnik:comment": id,
+                },
+              },
+            ]
+          );
+
+          // Unset it again.
+          // TODO: This fails
+          // driver.setValue(driver.getDataAttribute("layer-comment", "textarea"), "");
+          // driver.click(driver.getDataAttribute("min-zoom", "input"));
+
+          // driver.isStyleStoreEqual((a: any) => a.layers, [
+          //   {
+          //     "id": 'background:'+bgId,
+          //     "type": 'background'
+          //   }
+          // ]);
+        });
+
+        it("color", () => {
+          var bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+
+          when.click("spec-field:background-color");
+
+          should.equalStyleStore(
+            (a: any) => a.layers,
+            [
+              {
+                id: "background:" + bgId,
+                type: "background",
+              },
+            ]
+          );
+        });
+      });
+
+      describe("filter", () => {
+        it("expand/collapse");
+        it("compound filter");
+      });
+
+      describe("paint", () => {
+        it("expand/collapse");
+        it("color");
+        it("pattern");
+        it("opacity");
+      });
+      // <=====
+
+      describe("json-editor", () => {
+        it("expand/collapse");
+        it("modify");
+
+        // TODO
+        it.skip("parse error", () => {
+          var bgId = createBackground();
+
+          when.click("layer-list-item:background:" + bgId);
+
+          var errorSelector = ".CodeMirror-lint-marker-error";
+          should.notExist(errorSelector);
+
+          when.click(".CodeMirror");
+          when.typeKeys(
+            "\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013\uE013 {"
+          );
+          should.exist(errorSelector);
+        });
+      });
+    });
+  });
+
+  describe("fill", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "fill",
+        layer: "example",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "fill",
+            source: "example",
+          },
+        ]
+      );
+    });
+
+    // TODO: Change source
+    it("change source");
+  });
+
+  describe("line", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "line",
+        layer: "example",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "line",
+            source: "example",
+          },
+        ]
+      );
+    });
+
+    it("groups", () => {
+      // TODO
+      // Click each of the layer groups.
+    });
+  });
+
+  describe("symbol", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "symbol",
+        layer: "example",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "symbol",
+            source: "example",
+          },
+        ]
+      );
+    });
+  });
+
+  describe("raster", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "raster",
+        layer: "raster",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "raster",
+            source: "raster",
+          },
+        ]
+      );
+    });
+  });
+
+  describe("circle", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "circle",
+        layer: "example",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "circle",
+            source: "example",
+          },
+        ]
+      );
+    });
+  });
+
+  describe("fill extrusion", () => {
+    it("add", () => {
+      var id = when.fillLayersModal({
+        type: "fill-extrusion",
+        layer: "example",
+      });
+
+      should.equalStyleStore(
+        (a: any) => a.layers,
+        [
+          {
+            id: id,
+            type: "fill-extrusion",
+            source: "example",
+          },
+        ]
+      );
+    });
+  });
+
+  describe("groups", () => {
+    it("simple", () => {
+      when.setStyle("geojson");
+
+      when.openLayersModal();
+      when.fillLayersModal({
+        id: "foo",
+        type: "background",
+      });
+
+      when.openLayersModal();
+      when.fillLayersModal({
+        id: "foo_bar",
+        type: "background",
+      });
+
+      when.openLayersModal();
+      when.fillLayersModal({
+        id: "foo_bar_baz",
+        type: "background",
+      });
+
+      should.beVisible("layer-list-item:foo");
+
+      should.notBeVisible("layer-list-item:foo_bar");
+      should.notBeVisible("layer-list-item:foo_bar_baz");
+
+      when.click("layer-list-group:foo-0");
+
+      should.beVisible("layer-list-item:foo");
+      should.beVisible("layer-list-item:foo_bar");
+      should.beVisible("layer-list-item:foo_bar_baz");
+    });
+  });
+});

cypress/e2e/map.cy.ts

@@ -0,0 +1,23 @@
+import MaputnikDriver from "./driver";
+
+describe("map", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+  describe("zoom level", () => {
+    it("via url", () => {
+      var zoomLevel = 12.37;
+      when.setStyle("geojson", zoomLevel);
+      should.beVisible("maplibre:ctrl-zoom");
+      should.containText("maplibre:ctrl-zoom", "Zoom: " + zoomLevel);
+    });
+
+    it("via map controls", () => {
+      var zoomLevel = 12.37;
+      when.setStyle("geojson", zoomLevel);
+
+      should.beVisible("maplibre:ctrl-zoom");
+      when.clickZoomin();
+      should.containText("maplibre:ctrl-zoom", "Zoom: "+(zoomLevel + 1));
+    });
+  });
+});

cypress/e2e/modals.cy.ts

@@ -0,0 +1,161 @@
+import MaputnikDriver from "./driver";
+
+describe("modals", () => {
+  let { beforeAndAfter, given, when, get, should } = new MaputnikDriver();
+  beforeAndAfter();
+  beforeEach(() => {
+    when.setStyle("");
+  });
+  describe("open", () => {
+    beforeEach(() => {
+      when.click("nav:open");
+    });
+
+    it("close", () => {
+      when.closeModal("modal:open");
+      should.notExist("modal:open");
+    });
+
+    it.skip("upload", () => {
+      // HM: I was not able to make the following choose file actually to select a file and close the modal...
+      when.chooseExampleFile();
+
+      should.styleStoreEqualToExampleFileData();
+    });
+
+    it("load from url", () => {
+      var styleFileUrl = get.exampleFileUrl();
+
+      when.setValue(get.dataAttribute("modal:open.url.input"), styleFileUrl);
+      when.click("modal:open.url.button");
+      when.waitForExampleFileRequset();
+
+      should.styleStoreEqualToExampleFileData();
+    });
+  });
+
+  describe("shortcuts", () => {
+    it("open/close", () => {
+      when.setStyle("");
+      when.typeKeys("?");
+      when.closeModal("modal:shortcuts");
+      should.notExist("modal:shortcuts");
+    });
+  });
+
+  describe("export", () => {
+    beforeEach(() => {
+      when.click("nav:export");
+    });
+
+    it("close", () => {
+      when.closeModal("modal:export");
+      should.notExist("modal:export");
+    });
+
+    // TODO: Work out how to download a file and check the contents
+    it("download");
+  });
+
+  describe("sources", () => {
+    it("active sources");
+    it("public source");
+    it("add new source");
+  });
+
+  describe("inspect", () => {
+    it("toggle", () => {
+      when.setStyle("geojson");
+
+      when.selectWithin("nav:inspect", "inspect");
+    });
+  });
+
+  describe("style settings", () => {
+    beforeEach(() => {
+      when.click("nav:settings");
+    });
+
+    it("name", () => {
+      when.click("field-doc-button-Name");
+
+      should.containText("spec-field-doc", "name for the style");
+    });
+
+    it("show name specifications", () => {
+      when.setValue(get.dataAttribute("modal:settings.name"), "foobar");
+      when.click("modal:settings.owner");
+
+      should.equalStyleStore((obj) => obj.name, "foobar");
+    });
+
+    it("owner", () => {
+      when.setValue(get.dataAttribute("modal:settings.owner"), "foobar");
+      when.click("modal:settings.name");
+
+      should.equalStyleStore((obj) => obj.owner, "foobar");
+    });
+    it("sprite url", () => {
+      when.setValue(
+        get.dataAttribute("modal:settings.sprite"),
+        "http://example.com"
+      );
+      when.click("modal:settings.name");
+
+      should.equalStyleStore((obj) => obj.sprite, "http://example.com");
+    });
+    it("glyphs url", () => {
+      var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf";
+      when.setValue(get.dataAttribute("modal:settings.glyphs"), glyphsUrl);
+      when.click("modal:settings.name");
+
+      should.equalStyleStore((obj) => obj.glyphs, glyphsUrl);
+    });
+
+    it("maptiler access token", () => {
+      var apiKey = "testing123";
+      when.setValue(
+        get.dataAttribute(
+          "modal:settings.maputnik:openmaptiles_access_token"
+        ),
+        apiKey
+      );
+      when.click("modal:settings.name");
+
+      should.equalStyleStore(
+        (obj) => obj.metadata["maputnik:openmaptiles_access_token"],
+        apiKey
+      );
+    });
+
+    it("thunderforest access token", () => {
+      var apiKey = "testing123";
+      when.setValue(
+        get.dataAttribute(
+          "modal:settings.maputnik:thunderforest_access_token"
+        ),
+        apiKey
+      );
+      when.click("modal:settings.name");
+
+      should.equalStyleStore(
+        (obj) => obj.metadata["maputnik:thunderforest_access_token"],
+        apiKey
+      );
+    });
+
+    it("style renderer", () => {
+      cy.on("uncaught:exception", () => false); // this is due to the fact that this is an invalid style for openlayers
+      when.select("modal:settings.maputnik:renderer", "ol");
+      should.beSelected("modal:settings.maputnik:renderer", "ol");
+
+      when.click("modal:settings.name");
+
+      should.equalStyleStore((obj) => obj.metadata["maputnik:renderer"], "ol");
+    });
+  });
+
+  describe("sources", () => {
+    it("toggle");
+  });
+});

cypress/fixtures/example-layer-style.json

@@ -0,0 +1,18 @@
+{
+  "id": "test-style",
+  "version": 8,
+  "name": "Test Style",
+  "metadata": {
+    "maputnik:renderer": "mlgljs"
+  },
+  "sources": {},
+  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background"
+    }
+  ]
+}
+

cypress/fixtures/example-style.json

@@ -0,0 +1,12 @@
+{
+  "id": "test-style",
+  "version": 8,
+  "name": "Test Style",
+  "metadata": {
+    "maputnik:renderer": "mlgljs"
+  },
+  "sources": {},
+  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "layers": []
+}

cypress/fixtures/geojson-raster-style.json

@@ -0,0 +1,34 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+        "maputnik:renderer": "mlgljs"
+    },
+    "sources": {
+        "example": {
+            "type": "vector",
+            "data": {
+                "type": "FeatureCollection",
+                "features":[{
+                    "type": "Feature",
+                    "properties": {
+                        "name": "Dinagat Islands"
+                    },
+                    "geometry":{
+                        "type": "Point",
+                        "coordinates": [125.6, 10.1]
+                    }
+                }]
+            }
+        },
+        "raster": {
+            "tileSize": 256,
+            "tiles": ["http://localhost/example/{x}/{y}/{z}"],
+            "type": "raster"
+        }
+    },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+  }

cypress/fixtures/geojson-style.json

@@ -0,0 +1,29 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+        "maputnik:renderer": "mlgljs"
+    },
+    "sources": {
+        "example": {
+            "type": "vector",
+            "data": {
+                "type": "FeatureCollection",
+                "features":[{
+                    "type": "Feature",
+                    "properties": {
+                        "name": "Dinagat Islands"
+                    },
+                    "geometry":{
+                        "type": "Point",
+                        "coordinates": [125.6, 10.1]
+                    }
+                }]
+            }
+        }
+    },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+  }

cypress/fixtures/raster-style.json

@@ -0,0 +1,18 @@
+{
+    "id": "test-style",
+    "version": 8,
+    "name": "Test Style",
+    "metadata": {
+      "maputnik:renderer": "mlgljs"
+    },
+    "sources": {
+        "raster": {
+            "tileSize": 256,
+            "tiles": ["http://localhost/example/{x}/{y}/{z}"],
+            "type": "raster"
+        }
+      },
+    "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+    "layers": []
+  }

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "@cypress/code-coverage/support";
+import "cypress-plugin-tab";
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

index.html

@@ -0,0 +1,132 @@
+<!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="src/manifest.json">
+  <link rel="icon" href="src/favicon.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>
+</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="node_modules/maputnik-design/logos/logo-loading.svg" />
+    </div>
+    <div class="loading__text">Loading&hellip;</div>
+  </div>
+  <script type="module" src="/src/index.jsx"></script>
+</body>
+</html>

package.json

@@ -1,16 +1,18 @@
 {
   "name": "maputnik",
-  "version": "1.1.0-beta4",
-  "description": "A MapboxGL visual style editor",
+  "version": "2.0.0-pre.2",
+  "description": "A MapLibre GL visual style editor",
+  "type": "module",
   "main": "''",
   "scripts": {
-    "stats": "webpack --config config/webpack.production.config.js --profile --json > stats.json",
-    "build": "webpack --config config/webpack.production.config.js --progress --profile --colors",
-    "test": "wdio config/wdio.conf.js",
-    "test-watch": "wdio config/wdio.conf.js --watch",
-    "start": "webpack-dev-server --progress --profile --colors --config config/webpack.config.js",
-    "lint": "eslint --ext js --ext jsx {src,test}",
-    "lint-styles": "stylelint 'src/styles/*.scss'"
+    "start": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint ./src --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0 && npm run lint-css",
+    "test": "cypress run",
+    "cy:open": "cypress open",
+    "lint-css": "stylelint \"src/styles/*.scss\"",
+    "storybook": "storybook dev -h 0.0.0.0 -p 6006",
+    "build-storybook": "storybook build -o build/storybook"
   },
   "repository": {
     "type": "git",
@@ -20,115 +22,125 @@
   "license": "MIT",
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
-    "@mapbox/mapbox-gl-rtl-text": "^0.1.1",
-    "@mapbox/mapbox-gl-style-spec": "^10.0.1",
-    "classnames": "^2.2.5",
-    "codemirror": "^5.32.0",
-    "color": "^2.0.0",
-    "file-saver": "^1.3.3",
-    "github-api": "^3.0.0",
+    "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
+    "@maplibre/maplibre-gl-style-spec": "^17.0.1",
+    "@mdi/js": "^6.6.96",
+    "@mdi/react": "^1.5.0",
+    "array-move": "^4.0.0",
+    "buffer": "^6.0.3",
+    "classnames": "^2.3.1",
+    "codemirror": "^5.65.2",
+    "color": "^4.2.3",
+    "detect-browser": "^5.3.0",
+    "file-saver": "^2.0.5",
+    "json-stringify-pretty-compact": "^3.0.0",
+    "json-to-ast": "^2.1.0",
     "jsonlint": "github:josdejong/jsonlint#85a19d7",
+    "lodash": "^4.17.21",
     "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": "^0.43.0",
-    "mapbox-gl-inspect": "^1.2.6",
-    "maputnik-design": "github:maputnik/design",
-    "mousetrap": "^1.6.1",
-    "ol-mapbox-style": "^1.0.1",
-    "openlayers": "^4.4.2",
-    "prop-types": "^15.6.0",
-    "react": "16.0.0",
-    "react-addons-pure-render-mixin": "^15.6.2",
-    "react-autocomplete": "^1.7.2",
-    "react-codemirror2": "^3.0.7",
-    "react-collapse": "^4.0.3",
-    "react-color": "^2.13.8",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "16.0.0",
-    "react-file-reader-input": "^1.1.4",
-    "react-height": "^3.0.0",
-    "react-icon-base": "^2.1.1",
-    "react-icons": "^2.2.7",
-    "react-motion": "^0.5.2",
-    "react-sortable-hoc": "^0.6.8",
-    "reconnecting-websocket": "^3.2.2",
-    "request": "^2.83.0",
+    "mapbox-gl-inspect": "^1.3.1",
+    "maplibre-gl": "^2.4.0",
+    "maputnik-design": "github:maputnik/design#172b06c",
+    "ol": "^6.14.1",
+    "ol-mapbox-style": "^7.1.1",
+    "prop-types": "^15.8.1",
+    "react": "^16.0.0",
+    "react-accessible-accordion": "^4.0.0",
+    "react-aria-menubutton": "^7.0.3",
+    "react-aria-modal": "^4.0.1",
+    "react-autobind": "^1.0.6",
+    "react-autocomplete": "^1.8.1",
+    "react-collapse": "^5.1.1",
+    "react-color": "^2.19.3",
+    "react-dom": "^16.0.0",
+    "react-file-reader-input": "^2.0.0",
+    "react-icon-base": "^2.1.2",
+    "react-icons": "^4.3.1",
+    "react-sortable-hoc": "^2.0.0",
+    "reconnecting-websocket": "^4.4.0",
+    "sass": "^1.50.0",
+    "slugify": "^1.6.5",
+    "string-hash": "^1.1.3",
     "url": "^0.11.0"
   },
   "jshintConfig": {
     "esversion": 6
   },
   "stylelint": {
-    "extends": "stylelint-config-standard"
-  },
-  "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
-      }
+    "extends": "stylelint-config-recommended-scss",
+    "rules": {
+      "no-descending-specificity": null,
+      "media-feature-name-no-unknown": [
+        true,
+        {
+          "ignoreMediaFeatureNames": [
+            "prefers-reduced-motion"
+          ]
+        }
+      ]
     }
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.2",
-    "babel-loader": "7.1.1",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-flow-strip-types": "^6.22.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-flow": "^6.23.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-runtime": "^6.26.0",
-    "base64-loader": "^1.0.0",
-    "copy-webpack-plugin": "^4.2.0",
-    "css-loader": "^0.28.7",
-    "eslint": "^4.10.0",
-    "eslint-plugin-react": "^7.4.0",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.5",
-    "html-webpack-plugin": "^2.30.1",
-    "json-loader": "^0.5.7",
-    "karma": "^1.7.1",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-firefox-launcher": "^1.0.1",
-    "karma-mocha": "^1.3.0",
-    "karma-webpack": "^2.0.5",
-    "mocha": "^4.0.1",
-    "mocha-loader": "^1.1.1",
-    "node-sass": "^4.6.0",
-    "react-hot-loader": "^3.1.1",
-    "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
-    "stylelint": "^7.13.0",
-    "stylelint-config-standard": "^15.0.1",
-    "transform-loader": "^0.2.4",
-    "wdio-mocha-framework": "^0.5.11",
-    "wdio-phantomjs-service": "^0.2.2",
-    "wdio-spec-reporter": "^0.1.2",
-    "webdriverio": "^4.8.0",
-    "webpack": "^3.8.1",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-cleanup-plugin": "^0.5.1",
-    "webpack-dev-server": "^2.9.4"
+    "@cypress/code-coverage": "^3.12.15",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@shellygo/cypress-test-utils": "^2.0.9",
+    "@storybook/addon-a11y": "^7.6.5",
+    "@storybook/addon-actions": "^7.6.5",
+    "@storybook/addon-links": "^7.6.5",
+    "@storybook/addon-storysource": "^7.6.5",
+    "@storybook/addons": "^7.6.5",
+    "@storybook/builder-vite": "^7.6.5",
+    "@storybook/react": "^7.6.5",
+    "@storybook/react-vite": "^7.6.5",
+    "@storybook/theming": "^7.6.5",
+    "@types/codemirror": "^5.60.15",
+    "@types/color": "^3.0.6",
+    "@types/cors": "^2.8.17",
+    "@types/file-saver": "^2.0.7",
+    "@types/json-to-ast": "^2.1.4",
+    "@types/lodash.capitalize": "^4.2.9",
+    "@types/lodash.clamp": "^4.0.9",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.get": "^4.4.9",
+    "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.throttle": "^4.1.9",
+    "@types/react": "^16.14.52",
+    "@types/react-aria-menubutton": "^6.2.13",
+    "@types/react-aria-modal": "^4.0.9",
+    "@types/react-autocomplete": "^1.8.9",
+    "@types/react-collapse": "^5.0.4",
+    "@types/react-color": "^3.0.10",
+    "@types/react-dom": "^16.9.24",
+    "@types/react-file-reader-input": "^2.0.4",
+    "@types/react-icon-base": "^2.1.6",
+    "@types/string-hash": "^1.1.3",
+    "@types/uuid": "^9.0.7",
+    "@vitejs/plugin-react": "^4.2.0",
+    "cors": "^2.8.5",
+    "cypress": "^13.6.1",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "express": "^4.17.3",
+    "istanbul": "^0.4.5",
+    "istanbul-lib-coverage": "^3.2.0",
+    "mocha": "^9.2.2",
+    "postcss": "^8.4.12",
+    "react-hot-loader": "^4.13.0",
+    "storybook": "^7.6.5",
+    "stylelint": "^14.6.1",
+    "stylelint-config-recommended-scss": "^6.0.0",
+    "stylelint-scss": "^4.2.0",
+    "typescript": "^5.3.3",
+    "uuid": "^8.3.2",
+    "vite": "^5.0.0",
+    "vite-plugin-istanbul": "^5.0.0"
   }
 }

src/components/App.jsx

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

src/components/App.tsx

@@ -0,0 +1,989 @@
+// @ts-ignore - this can be easily replaced with arrow functions
+import autoBind from 'react-autobind';
+import React from 'react'
+import cloneDeep from 'lodash.clonedeep'
+import clamp from 'lodash.clamp'
+import buffer from 'buffer'
+import get from 'lodash.get'
+import {unset} from 'lodash'
+import {arrayMoveMutable} from 'array-move'
+import hash from "string-hash";
+import {Map, LayerSpecification, StyleSpecification, ValidationError, SourceSpecification} from 'maplibre-gl'
+import {latest, validate} from '@maplibre/maplibre-gl-style-spec'
+
+import MapMaplibreGl from './MapMaplibreGl'
+import MapOpenLayers from './MapOpenLayers'
+import LayerList from './LayerList'
+import LayerEditor from './LayerEditor'
+import AppToolbar, { MapState } from './AppToolbar'
+import AppLayout from './AppLayout'
+import MessagePanel from './AppMessagePanel'
+
+import ModalSettings from './ModalSettings'
+import ModalExport from './ModalExport'
+import ModalSources from './ModalSources'
+import ModalOpen from './ModalOpen'
+import ModalShortcuts from './ModalShortcuts'
+import ModalSurvey from './ModalSurvey'
+import ModalDebug from './ModalDebug'
+
+import {downloadGlyphsMetadata, downloadSpriteMetadata} from '../libs/metadata'
+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 { SortEnd } from 'react-sortable-hoc';
+import { MapOptions } from 'maplibre-gl';
+
+// Buffer must be defined globally for @maplibre/maplibre-gl-style-spec validate() function to succeed.
+window.Buffer = buffer.Buffer;
+
+function setFetchAccessToken(url: string, mapStyle: StyleSpecification) {
+  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: any, fieldName: string, newValues: any) {
+  return {
+    ...spec,
+    $root: {
+      ...spec.$root,
+      [fieldName]: {
+        ...spec.$root[fieldName],
+        values: newValues
+      }
+    }
+  }
+}
+
+type OnStyleChangedOpts = {
+  save?: boolean
+  addRevision?: boolean
+  initialLoad?: boolean
+}
+
+type MappedErrors = {
+  message: string
+  parsed?: {
+    type: string
+    data: {
+      index: number
+      key: string
+      message: string
+    }
+  }
+}
+
+type AppState = {
+  errors: MappedErrors[],
+  infos: string[],
+  mapStyle: StyleSpecification & {id: string},
+  dirtyMapStyle?: StyleSpecification,
+  selectedLayerIndex: number,
+  selectedLayerOriginalId?: string,
+  sources: {[key: string]: SourceSpecification},
+  vectorLayers: {},
+  spec: any,
+  mapView: {
+    zoom: number,
+    center: {
+      lng: number,
+      lat: number,
+    },
+  },
+  maplibreGlDebugOptions: Partial<MapOptions> & {
+    showTileBoundaries: boolean,
+    showCollisionBoxes: boolean,
+    showOverdrawInspector: boolean,
+  },
+  openlayersDebugOptions: {
+    debugToolbox: boolean,
+  },
+  mapState: MapState
+  isOpen: {
+    settings: boolean
+    sources: boolean
+    open: boolean
+    shortcuts: boolean
+    export: boolean
+    survey: boolean
+    debug: boolean
+  }
+}
+
+export default class App extends React.Component<any, AppState> {
+  revisionStore: RevisionStore;
+  styleStore: StyleStore | ApiStyleStore;
+  layerWatcher: LayerWatcher;
+  shortcutEl: ModalShortcuts | null = null;
+
+  constructor(props: any) {
+    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(".maplibregl-canvas") as HTMLCanvasElement).focus();
+        }
+      },
+      {
+        key: "!",
+        handler: () => {
+          this.toggleModal("debug");
+        }
+      },
+    ]
+
+    document.body.addEventListener("keyup", (e) => {
+      if(e.key === "Escape") {
+        (e.target as HTMLElement).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();
+        }
+      }
+    })
+
+    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, {initialLoad: true}))
+
+        if(Debug.enabled()) {
+          Debug.set("maputnik", "styleStore", this.styleStore);
+          Debug.set("maputnik", "revisionStore", this.revisionStore);
+        }
+      })
+    }
+
+    if(Debug.enabled()) {
+      Debug.set("maputnik", "revisionStore", this.revisionStore);
+      Debug.set("maputnik", "styleStore", this.styleStore);
+    }
+
+    this.state = {
+      errors: [],
+      infos: [],
+      mapStyle: style.emptyStyle,
+      selectedLayerIndex: 0,
+      sources: {},
+      vectorLayers: {},
+      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,
+      },
+      maplibreGlDebugOptions: {
+        showTileBoundaries: false,
+        showCollisionBoxes: false,
+        showOverdrawInspector: false,
+      },
+      openlayersDebugOptions: {
+        debugToolbox: false,
+      },
+    }
+
+    this.layerWatcher = new LayerWatcher({
+      onVectorLayersChange: v => this.setState({ vectorLayers: v })
+    })
+  }
+
+  handleKeyPress = (e: KeyboardEvent) => {
+    if(navigator.platform.toUpperCase().indexOf('MAC') >= 0) {
+      if(e.metaKey && e.shiftKey && e.keyCode === 90) {
+        e.preventDefault();
+        this.onRedo();
+      }
+      else if(e.metaKey && e.keyCode === 90) {
+        e.preventDefault();
+        this.onUndo();
+      }
+    }
+    else {
+      if(e.ctrlKey && e.keyCode === 90) {
+        e.preventDefault();
+        this.onUndo();
+      }
+      else if(e.ctrlKey && e.keyCode === 89) {
+        e.preventDefault();
+        this.onRedo();
+      }
+    }
+  }
+
+  componentDidMount() {
+    window.addEventListener("keydown", this.handleKeyPress);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("keydown", this.handleKeyPress);
+  }
+
+  saveStyle(snapshotStyle: StyleSpecification & {id: string}) {
+    this.styleStore.save(snapshotStyle)
+  }
+
+  updateFonts(urlTemplate: string) {
+    const metadata: {[key: string]: string} = this.state.mapStyle.metadata || {} as any
+    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: string) {
+    downloadSpriteMetadata(baseUrl, icons => {
+      this.setState({ spec: updateRootSpec(this.state.spec, 'sprite', icons)})
+    })
+  }
+
+  onChangeMetadataProperty = (property: string, value: any) => {
+    // If we're changing renderer reset the map state.
+    if (
+      property === 'maputnik:renderer' &&
+      value !== get(this.state.mapStyle, ['metadata', 'maputnik:renderer'], 'mlgljs')
+    ) {
+      this.setState({
+        mapState: 'map'
+      });
+    }
+
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        ...(this.state.mapStyle as any).metadata,
+        [property]: value
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
+  onStyleChanged = (newStyle: StyleSpecification & {id: string}, opts: OnStyleChangedOpts={}) => {
+    opts = {
+      save: true,
+      addRevision: true,
+      initialLoad: false,
+      ...opts,
+    };
+
+    if (opts.initialLoad) {
+      this.getInitialStateFromUrl(newStyle);
+    }
+
+    // This "any" can be removed in latest version of maplibre where maplibre re-exported types from style-spec
+    const errors = validate(newStyle as any, 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: (Error | ValidationError)[] = [];
+    if (newStyle && newStyle.layers) {
+      const foundLayers = new global.Map();
+      newStyle.layers.forEach((layer, index) => {
+        if (layer.id === "" && foundLayers.has(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: StyleSpecification | undefined = 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 as string)
+    }
+    if(newStyle.sprite !== this.state.mapStyle.sprite) {
+      this.updateIcons(newStyle.sprite as string)
+    }
+
+    if (opts.addRevision) {
+      this.revisionStore.addRevision(newStyle);
+    }
+    if (opts.save) {
+      this.saveStyle(newStyle as StyleSpecification & {id: string});
+    }
+
+    this.setState({
+      mapStyle: newStyle,
+      dirtyMapStyle: dirtyMapStyle,
+      errors: mappedErrors,
+    }, () => {
+      this.fetchSources();
+      this.setStateInUrl();
+    })
+
+  }
+
+  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: SortEnd) => {
+    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);
+    arrayMoveMutable(layers, oldIndex, newIndex);
+    this.onLayersChange(layers);
+  }
+
+  onLayersChange = (changedLayers: LayerSpecification[]) => {
+    const changedStyle = {
+      ...this.state.mapStyle,
+      layers: changedLayers
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
+  onLayerDestroy = (index: number) => {
+    let layers = this.state.mapStyle.layers;
+    const remainingLayers = layers.slice(0);
+    remainingLayers.splice(index, 1);
+    this.onLayersChange(remainingLayers);
+  }
+
+  onLayerCopy = (index: number) => {
+    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: number) => {
+    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: number, _oldId: string, newId: string) => {
+    const changedLayers = this.state.mapStyle.layers.slice(0)
+    changedLayers[index] = {
+      ...changedLayers[index],
+      id: newId
+    }
+
+    this.onLayersChange(changedLayers)
+  }
+
+  onLayerChanged = (index: number, layer: LayerSpecification) => {
+    const changedLayers = this.state.mapStyle.layers.slice(0)
+    changedLayers[index] = layer
+
+    this.onLayersChange(changedLayers)
+  }
+
+  setMapState = (newState: MapState) => {
+    this.setState({
+      mapState: newState
+    }, this.setStateInUrl);
+  }
+
+  setDefaultValues = (styleObj: StyleSpecification & {id: string}) => {
+    const metadata: {[key: string]: string} = styleObj.metadata || {} as any
+    if(metadata['maputnik:renderer'] === undefined) {
+      const changedStyle = {
+        ...styleObj,
+        metadata: {
+          ...styleObj.metadata as any,
+          'maputnik:renderer': 'mlgljs'
+        }
+      }
+      return changedStyle
+    } else {
+      return styleObj
+    }
+  }
+
+  openStyle = (styleObj: StyleSpecification & {id: string}) => {
+    styleObj = this.setDefaultValues(styleObj)
+    this.onStyleChanged(styleObj)
+  }
+
+  fetchSources() {
+    const sourceList: {[key: string]: any} = {};
+
+    for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
+      if(
+        !this.state.sources.hasOwnProperty(key) &&
+        val.type === "vector" &&
+        val.hasOwnProperty("url")
+      ) {
+        sourceList[key] = {
+          type: val.type,
+          layers: []
+        };
+
+        let url = val.url;
+
+        try {
+          url = setFetchAccessToken(url!, this.state.mapStyle)
+        } catch(err) {
+          console.warn("Failed to setFetchAccessToken: ", err);
+        }
+
+        fetch(url!, {
+          mode: 'cors',
+        })
+        .then(response => response.json())
+        .then(json => {
+
+          if(!json.hasOwnProperty("vector_layers")) {
+            return;
+          }
+
+          // Create new objects before setState
+          const sources = Object.assign({}, {
+            [key]: this.state.sources[key],
+          });
+
+          for(let layer of json.vector_layers) {
+            (sources[key] as any).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);
+        });
+      }
+      else {
+        sourceList[key] = this.state.sources[key] || this.state.mapStyle.sources[key];
+      }
+    }
+
+    if(!isEqual(this.state.sources, sourceList)) {
+      console.debug("Setting sources");
+      this.setState({
+        sources: sourceList
+      })
+    }
+  }
+
+  _getRenderer () {
+    const metadata: {[key:string]: string} = this.state.mapStyle.metadata || {} as any;
+    return metadata['maputnik:renderer'] || 'mlgljs';
+  }
+
+  onMapChange = (mapView: {
+    zoom: number,
+    center: {
+      lng: number,
+      lat: number,
+    },
+  }) => {
+    this.setState({
+      mapView,
+    });
+  }
+
+  mapRenderer() {
+    const {mapStyle, dirtyMapStyle} = this.state;
+
+    const mapProps = {
+      mapStyle: (dirtyMapStyle || mapStyle),
+      replaceAccessTokens: (mapStyle: StyleSpecification) => {
+        return style.replaceAccessTokens(mapStyle, {
+          allowFallback: true
+        });
+      },
+      onDataChange: (e: {map: Map}) => {
+        this.layerWatcher.analyzeMap(e.map)
+        this.fetchSources();
+      },
+    }
+
+    const renderer = this._getRenderer();
+
+    let mapElement;
+
+    // Check if OL code has been loaded?
+    if(renderer === 'ol') {
+      mapElement = <MapOpenLayers
+        {...mapProps}
+        onChange={this.onMapChange}
+        debugToolbox={this.state.openlayersDebugOptions.debugToolbox}
+        onLayerSelect={this.onLayerSelect}
+      />
+    } else {
+      mapElement = <MapMaplibreGl {...mapProps}
+        onChange={this.onMapChange}
+        options={this.state.maplibreGlDebugOptions}
+        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: {filter?: string} = {};
+    if (filterName) {
+      elementStyle.filter = `url('#${filterName}')`;
+    }
+
+    return <div style={elementStyle} className="maputnik-map__container" data-wd-key="maplibre:container">
+      {mapElement}
+    </div>
+  }
+
+  setStateInUrl = () => {
+    const {mapState, mapStyle, isOpen} = this.state;
+    const {selectedLayerIndex} = this.state;
+    const url = new URL(location.href);
+    const hashVal = hash(JSON.stringify(mapStyle));
+    url.searchParams.set("layer", `${hashVal}~${selectedLayerIndex}`);
+
+    const openModals = Object.entries(isOpen)
+    .map(([key, val]) => (val === true ? key : null))
+    .filter(val => val !== null);
+
+    if (openModals.length > 0) {
+      url.searchParams.set("modal", openModals.join(","));
+    }
+    else {
+      url.searchParams.delete("modal");
+    }
+
+    if (mapState === "map") {
+      url.searchParams.delete("view");
+    }
+    else if (mapState === "inspect") {
+      url.searchParams.set("view", "inspect");
+    }
+
+    history.replaceState({selectedLayerIndex}, "Maputnik", url.href);
+  }
+
+  getInitialStateFromUrl = (mapStyle: StyleSpecification) => {
+    const url = new URL(location.href);
+    const modalParam = url.searchParams.get("modal");
+    if (modalParam && modalParam !== "") {
+      const modals = modalParam.split(",");
+      const modalObj: {[key: string]: boolean} = {};
+      modals.forEach(modalName => {
+        modalObj[modalName] = true;
+      });
+
+      this.setState({
+        isOpen: {
+          ...this.state.isOpen,
+          ...modalObj,
+        }
+      });
+    }
+
+    const view = url.searchParams.get("view");
+    if (view && view !== "") {
+      this.setMapState(view as MapState);
+    }
+
+    const path = url.searchParams.get("layer");
+    if (path) {
+      try {
+        const parts = path.split("~");
+        const [hashVal, selectedLayerIndex] = [
+          parts[0],
+          parseInt(parts[1], 10),
+        ];
+
+        let valid = true;
+        if (hashVal !== "-") {
+          const currentHashVal = hash(JSON.stringify(mapStyle));
+          if (currentHashVal !== parseInt(hashVal, 10)) {
+            valid = false;
+          }
+        }
+        if (valid) {
+          this.setState({
+            selectedLayerIndex,
+            selectedLayerOriginalId: mapStyle.layers[selectedLayerIndex].id,
+          });
+        }
+      }
+      catch (err) {
+        console.warn(err);
+      }
+    }
+  }
+
+  onLayerSelect = (index: number) => {
+    this.setState({
+      selectedLayerIndex: index,
+      selectedLayerOriginalId: this.state.mapStyle.layers[index].id,
+    }, this.setStateInUrl);
+  }
+
+  setModal(modalName: keyof AppState["isOpen"], value: boolean) {
+    if(modalName === 'survey' && value === false) {
+      localStorage.setItem('survey', '');
+    }
+
+    this.setState({
+      isOpen: {
+        ...this.state.isOpen,
+        [modalName]: value
+      }
+    }, this.setStateInUrl)
+  }
+
+  toggleModal(modalName: keyof AppState["isOpen"]) {
+    this.setModal(modalName, !this.state.isOpen[modalName]);
+  }
+
+  onChangeOpenlayersDebug = (key: keyof AppState["openlayersDebugOptions"], value: boolean) => {
+    this.setState({
+      openlayersDebugOptions: {
+        ...this.state.openlayersDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
+  onChangeMaplibreGlDebug = (key: keyof AppState["maplibreGlDebugOptions"], value: any) => {
+    this.setState({
+      maplibreGlDebugOptions: {
+        ...this.state.maplibreGlDebugOptions,
+        [key]: value,
+      }
+    });
+  }
+
+  render() {
+    const layers = this.state.mapStyle.layers || []
+    const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : undefined
+
+    const toolbar = <AppToolbar
+      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={this.state.selectedLayerOriginalId}
+      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}
+    /> : undefined
+
+    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}
+    /> : undefined
+
+
+    const modals = <div>
+      <ModalDebug
+        renderer={this._getRenderer()}
+        maplibreGlDebugOptions={this.state.maplibreGlDebugOptions}
+        openlayersDebugOptions={this.state.openlayersDebugOptions}
+        onChangeMaplibreGlDebug={this.onChangeMaplibreGlDebug}
+        onChangeOpenlayersDebug={this.onChangeOpenlayersDebug}
+        isOpen={this.state.isOpen.debug}
+        onOpenToggle={this.toggleModal.bind(this, 'debug')}
+        mapView={this.state.mapView}
+      />
+      <ModalShortcuts
+        ref={(el) => this.shortcutEl = el}
+        isOpen={this.state.isOpen.shortcuts}
+        onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
+      />
+      <ModalSettings
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        onChangeMetadataProperty={this.onChangeMetadataProperty}
+        isOpen={this.state.isOpen.settings}
+        onOpenToggle={this.toggleModal.bind(this, 'settings')}
+      />
+      <ModalExport
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        isOpen={this.state.isOpen.export}
+        onOpenToggle={this.toggleModal.bind(this, 'export')}
+      />
+      <ModalOpen
+        isOpen={this.state.isOpen.open}
+        onStyleOpen={this.openStyle}
+        onOpenToggle={this.toggleModal.bind(this, 'open')}
+      />
+      <ModalSources
+        mapStyle={this.state.mapStyle}
+        onStyleChanged={this.onStyleChanged}
+        isOpen={this.state.isOpen.sources}
+        onOpenToggle={this.toggleModal.bind(this, 'sources')}
+      />
+      <ModalSurvey
+        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.tsx

@@ -2,15 +2,16 @@ 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,
-  }
+type AppLayoutProps = {
+  toolbar: React.ReactElement
+  layerList: React.ReactElement
+  layerEditor?: React.ReactElement
+  map: React.ReactElement
+  bottom?: React.ReactElement
+  modals?: React.ReactNode
+};
 
+class AppLayout extends React.Component<AppLayoutProps> {
   static childContextTypes = {
     reactIconBase: PropTypes.object
   }
@@ -25,9 +26,7 @@ class AppLayout extends React.Component {
     return <div className="maputnik-layout">
       {this.props.toolbar}
       <div className="maputnik-layout-list">
-        <ScrollContainer>
-          {this.props.layerList}
-        </ScrollContainer>
+        {this.props.layerList}
       </div>
       <div className="maputnik-layout-drawer">
         <ScrollContainer>
@@ -39,6 +38,7 @@ class AppLayout extends React.Component {
           {this.props.bottom}
         </div>
       }
+      {this.props.modals}
     </div>
   }
 }

src/components/AppMessagePanel.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {formatLayerId} from '../util/format';
+import {LayerSpecification, StyleSpecification} from 'maplibre-gl';
+
+type AppMessagePanelProps = {
+  errors?: unknown[]
+  infos?: unknown[]
+  mapStyle?: StyleSpecification
+  onLayerSelect?(...args: unknown[]): unknown
+  currentLayer?: LayerSpecification
+  selectedLayerIndex?: number
+};
+
+export default class AppMessagePanel extends React.Component<AppMessagePanelProps> {
+  static defaultProps = {
+    onLayerSelect: () => {},
+  }
+
+  render() {
+    const {selectedLayerIndex} = this.props;
+    const errors = this.props.errors?.map((error: any, idx) => {
+      let content;
+      if (error.parsed && error.parsed.type === "layer") {
+        const {parsed} = error;
+        const layerId = this.props.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>
+  }
+}
+

src/components/AppToolbar.tsx

@@ -0,0 +1,285 @@
+import React from 'react'
+import classnames from 'classnames'
+import {detect} from 'detect-browser';
+
+import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
+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;
+
+
+type IconTextProps = {
+  children?: React.ReactNode
+};
+
+
+class IconText extends React.Component<IconTextProps> {
+  render() {
+    return <span className="maputnik-icon-text">{this.props.children}</span>
+  }
+}
+
+type ToolbarLinkProps = {
+  className?: string
+  children?: React.ReactNode
+  href?: string
+  onToggleModal?(...args: unknown[]): unknown
+};
+
+class ToolbarLink extends React.Component<ToolbarLinkProps> {
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {this.props.children}
+    </a>
+  }
+}
+
+type ToolbarLinkHighlightedProps = {
+  className?: string
+  children?: React.ReactNode
+  href?: string
+  onToggleModal?(...args: unknown[]): unknown
+};
+
+class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps> {
+  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>
+  }
+}
+
+type ToolbarSelectProps = {
+  children?: React.ReactNode
+  wdKey?: string
+};
+
+class ToolbarSelect extends React.Component<ToolbarSelectProps> {
+  render() {
+    return <div
+      className='maputnik-toolbar-select'
+      data-wd-key={this.props.wdKey}
+    >
+      {this.props.children}
+    </div>
+  }
+}
+
+type ToolbarActionProps = {
+  children?: React.ReactNode
+  onClick?(...args: unknown[]): unknown
+  wdKey?: string
+};
+
+class ToolbarAction extends React.Component<ToolbarActionProps> {
+  render() {
+    return <button
+      className='maputnik-toolbar-action'
+      data-wd-key={this.props.wdKey}
+      onClick={this.props.onClick}
+    >
+      {this.props.children}
+    </button>
+  }
+}
+
+export type MapState = "map" | "inspect" | "filter-achromatopsia" | "filter-deuteranopia" | "filter-protanopia" | "filter-tritanopia";
+
+type AppToolbarProps = {
+  mapStyle: object
+  inspectModeEnabled: boolean
+  onStyleChanged(...args: unknown[]): unknown
+  // A new style has been uploaded
+  onStyleOpen(...args: unknown[]): unknown
+  // A dict of source id's and the available source layers
+  sources: object
+  children?: React.ReactNode
+  onToggleModal(...args: unknown[]): unknown
+  onSetMapState(mapState: MapState): unknown
+  mapState?: MapState
+  renderer?: string
+};
+
+export default class AppToolbar extends React.Component<AppToolbarProps> {
+  state = {
+    isOpen: {
+      settings: false,
+      sources: false,
+      open: false,
+      add: false,
+      export: false,
+    }
+  }
+
+  handleSelection(val: MapState) {
+    this.props.onSetMapState(val);
+  }
+
+  onSkip = (target: string) => {
+    if (target === "map") {
+      (document.querySelector(".maplibregl-canvas") as HTMLCanvasElement).focus();
+    }
+    else {
+      const el = document.querySelector("#skip-target-"+target) as HTMLButtonElement;
+      el.focus();
+    }
+  }
+
+  render() {
+    const views = [
+      {
+        id: "map",
+        group: "general",
+        title: "Map",
+      },
+      {
+        id: "inspect",
+        group: "general",
+        title: "Inspect",
+        disabled: this.props.renderer === 'ol',
+      },
+      {
+        id: "filter-deuteranopia",
+        group: "color-accessibility",
+        title: "Deuteranopia filter",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-protanopia",
+        group: "color-accessibility",
+        title: "Protanopia filter",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-tritanopia",
+        group: "color-accessibility",
+        title: "Tritanopia filter",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+      {
+        id: "filter-achromatopsia",
+        group: "color-accessibility",
+        title: "Achromatopsia filter",
+        disabled: !colorAccessibilityFiltersEnabled,
+      },
+    ];
+
+    const currentView = views.find((view) => {
+      return view.id === this.props.mapState;
+    });
+
+    return <nav className='maputnik-toolbar'>
+      <div className="maputnik-toolbar__inner">
+        <div
+          className="maputnik-toolbar-logo-container"
+        >
+          {/* Keyboard accessible quick links */}
+          <button
+            data-wd-key="root:skip:layer-list"
+            className="maputnik-toolbar-skip"
+            onClick={_e => this.onSkip("layer-list")}
+          >
+            Layers list
+          </button>
+          <button
+            data-wd-key="root:skip:layer-editor"
+            className="maputnik-toolbar-skip"
+            onClick={_e => this.onSkip("layer-editor")}
+          >
+            Layer editor
+          </button>
+          <button
+            data-wd-key="root:skip:map-view"
+            className="maputnik-toolbar-skip"
+            onClick={_e => this.onSkip("map")}
+          >
+            Map view
+          </button>
+          <a
+            className="maputnik-toolbar-logo"
+            target="blank"
+            rel="noreferrer noopener"
+            href="https://github.com/maputnik/editor"
+          >
+            <img src="node_modules/maputnik-design/logos/logo-color.svg" />
+            <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" role="navigation" aria-label="Toolbar">
+          <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 />
+            <label>View
+              <select
+                className="maputnik-select"
+                data-wd-key="maputnik-select"
+                onChange={(e) => this.handleSelection(e.target.value as MapState)}
+                value={currentView?.id}
+              >
+                {views.filter(v => v.group === "general").map((item) => {
+                  return (
+                    <option key={item.id} value={item.id} disabled={item.disabled} data-wd-key={item.id}>
+                      {item.title}
+                    </option>
+                  );
+                })}
+                <optgroup label="Color accessibility">
+                  {views.filter(v => v.group === "color-accessibility").map((item) => {
+                    return (
+                      <option key={item.id} value={item.id} disabled={item.disabled}>
+                        {item.title}
+                      </option>
+                    );
+                  })}
+                </optgroup>
+              </select>
+            </label>
+          </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>
+    </nav>
+  }
+}

src/components/Block.tsx

@@ -0,0 +1,103 @@
+import React, {SyntheticEvent} from 'react'
+import classnames from 'classnames'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
+
+
+type BlockProps = {
+  "data-wd-key"?: string
+  label?: string
+  action?: React.ReactElement
+  style?: object
+  onChange?(...args: unknown[]): unknown
+  fieldSpec?: object
+  wideMode?: boolean
+  error?: {message: string}
+};
+
+type BlockState = {
+  showDoc: boolean
+};
+
+/** Wrap a component with a label */
+export default class Block extends React.Component<BlockProps, BlockState> {
+  _blockEl: HTMLDivElement | null = null;
+
+  constructor (props: BlockProps) {
+    super(props);
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
+    const value = e.target.value
+    if (this.props.onChange) {
+      return this.props.onChange(value === "" ? undefined : value)
+    }
+  }
+
+  onToggleDoc = (val: boolean) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
+  /**
+   * Some fields for example <InputColor/> bind click events inside the element
+   * to close the picker. This in turn propagates to the <label/> element
+   * causing the picker to reopen. This causes a scenario where the picker can
+   * never be closed once open.
+   */
+  onLabelClick = (event: SyntheticEvent<any, any>) => {
+    const el = event.nativeEvent.target;
+    const contains = this._blockEl?.contains(el);
+
+    if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
+      event.stopPropagation();
+    }
+        event.preventDefault();
+  }
+
+  render() {
+    return <label 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
+      })}
+      onClick={this.onLabelClick}
+    >
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      <div className="maputnik-input-block-content" ref={el => this._blockEl = el}>
+        {this.props.children}
+      </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
+    </label>
+  }
+}
+

src/components/Button.jsx

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

src/components/Collapse.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Collapse as ReactCollapse } from 'react-collapse'
+import {reducedMotionEnabled} from '../libs/accessibility'
+
+
+type CollapseProps = {
+  isActive: boolean
+  children: React.ReactElement
+};
+
+
+export default class Collapse extends React.Component<CollapseProps> {
+  static defaultProps = {
+    isActive: true
+  }
+
+  render() {
+    if (reducedMotionEnabled()) {
+      return (
+        <div style={{display: this.props.isActive ? "block" : "none"}}>
+          {this.props.children}
+        </div>
+      )
+    }
+    else {
+      return (
+        <ReactCollapse isOpened={this.props.isActive}>
+          {this.props.children}
+        </ReactCollapse>
+      )
+    }
+  }
+}
+

src/components/Collapser.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
+
+type CollapserProps = {
+  isCollapsed: boolean
+  style?: object
+};
+
+export default class Collapser extends React.Component<CollapserProps> {
+  render() {
+    const iconStyle = {
+      width: 20,
+      height: 20,
+      ...this.props.style,
+    }
+    return this.props.isCollapsed ? <MdArrowDropUp style={iconStyle}/> : <MdArrowDropDown style={iconStyle} />
+  }
+}
+

src/components/Doc.tsx

@@ -0,0 +1,91 @@
+import React from 'react'
+
+const headers = {
+  js: "JS",
+  android: "Android",
+  ios: "iOS",
+  macos: "macOS",
+};
+
+type DocProps = {
+  fieldSpec: {
+    doc?: string
+    values?: {
+      [key: string]: {
+        doc?: string
+      }
+    }
+    'sdk-support'?: {
+      [key: string]: typeof headers
+    }
+  }
+};
+
+export default class Doc extends React.Component<DocProps> {
+  render () {
+    const {fieldSpec} = this.props;
+
+    const {doc, values} = fieldSpec;
+    const sdkSupport = fieldSpec['sdk-support'];
+
+    const renderValues = (
+      !!values &&
+      // HACK: Currently we merge additional values into the style spec, so this is required
+      // See <https://github.com/maputnik/editor/blob/main/src/components/PropertyGroup.jsx#L16>
+      !Array.isArray(values)
+    );
+
+    return (
+      <>
+        {doc &&
+          <div className="SpecDoc">
+            <div className="SpecDoc__doc" data-wd-key='spec-field-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) => {
+                        if (supportObj.hasOwnProperty(k)) {
+                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
+                        }
+                        else {
+                          return <td key={k}>no</td>;
+                        }
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        }
+      </>
+    );
+  }
+}

src/components/FieldArray.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
+import Fieldset from './Fieldset'
+
+type FieldArrayProps = InputArrayProps & {
+  name?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+export default class FieldArray extends React.Component<FieldArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputArray {...this.props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldAutocomplete.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Block from './Block'
+import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
+
+
+type FieldAutocompleteProps = InputAutocompleteProps & {
+  label?: string;
+};
+
+
+export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputAutocomplete {...this.props} />
+    </Block>
+  }
+}
+

src/components/FieldCheckbox.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Block from './Block'
+import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
+
+
+type FieldCheckboxProps = InputCheckboxProps & {
+  label?: string;
+};
+
+
+export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputCheckbox {...this.props} />
+    </Block>
+  }
+}
+

src/components/FieldColor.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Block from './Block'
+import InputColor, {InputColorProps} from './InputColor'
+
+
+type FieldColorProps = InputColorProps & {
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldColor extends React.Component<FieldColorProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputColor {...this.props} />
+    </Block>
+  }
+}
+

src/components/FieldComment.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import Block from './Block'
+import InputString from './InputString'
+
+type FieldCommentProps = {
+  value?: string
+  onChange(value: string | undefined): unknown
+  error: {message: string}
+};
+
+export default class FieldComment extends React.Component<FieldCommentProps> {
+  render() {
+    const fieldSpec = {
+      doc: "Comments for the current layer. This is non-standard and not in the spec."
+    };
+
+    return <Block
+      label={"Comments"}
+      fieldSpec={fieldSpec}
+      data-wd-key="layer-comment"
+      error={this.props.error}
+    >
+      <InputString
+        multi={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
+      />
+    </Block>
+  }
+}

src/components/FieldDocLabel.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
+
+type FieldDocLabelProps = {
+  label: object | string | undefined
+  fieldSpec?: {
+    doc?: string
+  }
+  onToggleDoc?(...args: unknown[]): unknown
+};
+
+type FieldDocLabelState = {
+  open: boolean
+};
+
+export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
+  constructor (props: FieldDocLabelProps) {
+    super(props);
+    this.state = {
+      open: false,
+    }
+  }
+
+  onToggleDoc = (open: boolean) => {
+    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)}
+            data-wd-key={'field-doc-button-'+label}
+          >
+            {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/FieldDynamicArray.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
+import Fieldset from './Fieldset'
+
+type FieldDynamicArrayProps = InputDynamicArrayProps & {
+  name?: string
+};
+
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputDynamicArray {...this.props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldEnum.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import InputEnum, {InputEnumProps} from './InputEnum'
+import Fieldset from './Fieldset';
+
+
+type FieldEnumProps = InputEnumProps & { 
+  label?: string;
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldEnum extends React.Component<FieldEnumProps> {
+  render() {
+    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputEnum {...this.props} />
+    </Fieldset>
+  }
+}

src/components/FieldFunction.tsx

@@ -0,0 +1,407 @@
+import React from 'react'
+
+import SpecProperty from './_SpecProperty'
+import DataProperty, { Stop } from './_DataProperty'
+import ZoomProperty from './_ZoomProperty'
+import ExpressionProperty from './_ExpressionProperty'
+import {function as styleFunction} from '@maplibre/maplibre-gl-style-spec';
+import {findDefaultFromSpec} from '../util/spec-helper';
+
+
+function isLiteralExpression(value: any) {
+  return (Array.isArray(value) && value.length === 2 && value[0] === "literal");
+}
+
+function isGetExpression(value: any) {
+  return (
+    Array.isArray(value) &&
+    value.length === 2 &&
+    value[0] === "get"
+  );
+}
+
+function isZoomField(value: any) {
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) === 'undefined' &&
+    Array.isArray(value.stops) &&
+    value.stops.length > 1 &&
+    value.stops.every((stop: Stop) => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2
+      );
+    })
+  );
+}
+
+function isIdentityProperty(value: any) {
+  return (
+    typeof(value) === 'object' &&
+    value.type === "identity" &&
+    value.hasOwnProperty("property")
+  );
+}
+
+function isDataStopProperty(value: any) {
+  return (
+    typeof(value) === 'object' &&
+    value.stops &&
+    typeof(value.property) !== 'undefined' &&
+    value.stops.length > 1 &&
+    Array.isArray(value.stops) &&
+    value.stops.every((stop: Stop) => {
+      return (
+        Array.isArray(stop) &&
+        stop.length === 2 &&
+        typeof(stop[0]) === 'object'
+      );
+    })
+  );
+}
+
+function isDataField(value: any) {
+  return (
+    isIdentityProperty(value) ||
+    isDataStopProperty(value)
+  );
+}
+
+function isPrimative(value: any): value is string | boolean | number {
+  const valid = ["string", "boolean", "number"];
+  return valid.includes(typeof(value));
+}
+
+function isArrayOfPrimatives(values: any): values is Array<string | boolean | number> {
+  if (Array.isArray(values)) {
+    return values.every(isPrimative);
+  }
+  return false;
+}
+
+function getDataType(value: any, fieldSpec={} as any) {
+  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";
+  }
+}
+
+
+type FieldFunctionProps = {
+  onChange(fieldName: string, value: any): unknown
+  fieldName: string
+  fieldType: string
+  fieldSpec: any
+  errors?: {[key: string]: {message: string}}
+  value?: any
+};
+
+type FieldFunctionState = {
+  dataType: string
+  isEditing: boolean
+}
+
+/** Supports displaying spec field for zoom function objects
+ * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
+ */
+export default class FieldFunction extends React.Component<FieldFunctionProps, FieldFunctionState> {
+  constructor (props: FieldFunctionProps) {
+    super(props);
+    this.state = {
+      dataType: getDataType(props.value, props.fieldSpec),
+      isEditing: false,
+    }
+  }
+
+  static getDerivedStateFromProps(props: FieldFunctionProps, state: FieldFunctionState) {
+    // 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: any) {
+    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: number) => {
+    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 {value} = this.props;
+
+    let zoomFunc;
+    if (typeof(value) === "object") {
+      if (value.stops) {
+        zoomFunc = {
+          base: value.base,
+          stops: value.stops.map((stop: Stop) => {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        zoomFunc = {
+          base: value.base,
+          stops: [
+            [6, findDefaultFromSpec(this.props.fieldSpec)],
+            [10, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
+    }
+    else {
+      zoomFunc = {
+        stops: [
+          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
+          [10, 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 {value} = this.props;
+    let dataFunc;
+
+    if (typeof(value) === "object") {
+      if (value.stops) {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          base: value.base,
+          stops: value.stops.map((stop: Stop) => {
+            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
+          })
+        }
+      }
+      else {
+        dataFunc = {
+          property: "",
+          type: functionType,
+          base: value.base,
+          stops: [
+            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
+            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
+          ]
+        }
+      }
+    }
+    else {
+      dataFunc = {
+        property: "",
+        type: functionType,
+        base: value.base,
+        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}
+          onChangeToDataFunction={this.makeDataFunction}
+          onExpressionClick={this.makeExpression}
+        />
+      )
+    }
+    else if (dataType === "data_function") {
+      // TODO: Rename to FieldFunction **this file** shouldn't be called that
+      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}
+          onChangeToZoomFunction={this.makeZoomFunction}
+          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/FieldId.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputString from './InputString'
+
+type FieldIdProps = {
+  value: string
+  wdKey: string
+  onChange(value: string | undefined): unknown
+  error?: {message: string}
+};
+
+export default class FieldId extends React.Component<FieldIdProps> {
+  render() {
+    return <Block label={"ID"} fieldSpec={latest.layer.id}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      <InputString
+        value={this.props.value}
+        onInput={this.props.onChange}
+      />
+    </Block>
+  }
+}

src/components/FieldJson.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import InputJson, {InputJsonProps} from './InputJson'
+
+
+type FieldJsonProps = InputJsonProps & {};
+
+
+export default class FieldJson extends React.Component<FieldJsonProps> {
+  render() {
+    return <InputJson {...this.props} />
+  }
+}
+

src/components/FieldMaxZoom.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputNumber from './InputNumber'
+
+type FieldMaxZoomProps = {
+  value?: number
+  onChange(value: number | undefined): unknown
+  error?: {message: string}
+};
+
+export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
+  render() {
+    return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
+      error={this.props.error}
+      data-wd-key="max-zoom"
+    >
+      <InputNumber
+        allowRange={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.maxzoom.minimum}
+        max={latest.layer.maxzoom.maximum}
+        default={latest.layer.maxzoom.maximum}
+      />
+    </Block>
+  }
+}

src/components/FieldMinZoom.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputNumber from './InputNumber'
+
+type FieldMinZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: {message: string}
+};
+
+export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
+  render() {
+    return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
+      error={this.props.error}
+      data-wd-key="min-zoom"
+    >
+      <InputNumber
+        allowRange={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={latest.layer.minzoom.minimum}
+        max={latest.layer.minzoom.maximum}
+        default={latest.layer.minzoom.minimum}
+      />
+    </Block>
+  }
+}

src/components/FieldMultiInput.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
+import Fieldset from './Fieldset'
+
+
+type FieldMultiInputProps = InputMultiInputProps & {
+  label?: string
+};
+
+
+export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputMultiInput {...this.props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldNumber.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import InputNumber, {InputNumberProps} from './InputNumber'
+import Block from './Block'
+
+
+type FieldNumberProps = InputNumberProps & {
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldNumber extends React.Component<FieldNumberProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputNumber {...this.props} />
+    </Block>
+  }
+}

src/components/FieldSelect.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Block from './Block'
+import InputSelect, {InputSelectProps} from './InputSelect'
+
+
+type FieldSelectProps = InputSelectProps & {
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldSelect extends React.Component<FieldSelectProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputSelect {...this.props}/>
+    </Block>
+  }
+}
+
+

src/components/FieldSource.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+type FieldSourceProps = {
+  value?: string
+  wdKey?: string
+  onChange?(value: string| undefined): unknown
+  sourceIds?: unknown[]
+  error?: {message: string}
+};
+
+export default class FieldSource extends React.Component<FieldSourceProps> {
+  static defaultProps = {
+    onChange: () => {},
+    sourceIds: [],
+  }
+
+  render() {
+    return <Block
+      label={"Source"}
+      fieldSpec={latest.layer.source}
+      error={this.props.error}
+      data-wd-key={this.props.wdKey}
+    >
+      <InputAutocomplete
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceIds?.map(src => [src, src])}
+      />
+    </Block>
+  }
+}

src/components/FieldSourceLayer.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputAutocomplete from './InputAutocomplete'
+
+type FieldSourceLayerProps = {
+  value?: string
+  onChange?(...args: unknown[]): unknown
+  sourceLayerIds?: unknown[]
+  isFixed?: boolean
+  error?: {message: string}
+};
+
+export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
+  static defaultProps = {
+    onChange: () => {},
+    sourceLayerIds: [],
+    isFixed: false
+  }
+
+  render() {
+    return <Block 
+      label={"Source Layer"} 
+      fieldSpec={latest.layer['source-layer']}
+      data-wd-key="layer-source-layer"
+      error={this.props.error}
+    >
+      <InputAutocomplete
+        keepMenuWithinWindowBounds={!!this.props.isFixed}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        options={this.props.sourceLayerIds?.map(l => [l, l])}
+      />
+    </Block>
+  }
+}

src/components/FieldString.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import Block from './Block'
+import InputString, {InputStringProps} from './InputString'
+
+type FieldStringProps = InputStringProps & {
+  name?: string
+  label?: string
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+export default class FieldString extends React.Component<FieldStringProps> {
+  render() {
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputString {...this.props} />
+    </Block>
+  }
+}

src/components/FieldType.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import {latest} from '@maplibre/maplibre-gl-style-spec'
+import Block from './Block'
+import InputSelect from './InputSelect'
+import InputString from './InputString'
+
+type FieldTypeProps = {
+  value: string
+  wdKey?: string
+  onChange(value: string): unknown
+  error?: {message: string}
+  disabled?: boolean
+};
+
+export default class FieldType extends React.Component<FieldTypeProps> {
+  static defaultProps = {
+    disabled: false,
+  }
+
+  render() {
+    return <Block label={"Type"} fieldSpec={latest.layer.type}
+      data-wd-key={this.props.wdKey}
+      error={this.props.error}
+    >
+      {this.props.disabled &&
+        <InputString
+          value={this.props.value}
+          disabled={true}
+        />
+      }
+      {!this.props.disabled &&
+        <InputSelect
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+        />
+      }
+    </Block>
+  }
+}

src/components/FieldUrl.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
+import Block from './Block'
+
+
+type FieldUrlProps = InputUrlProps & {
+  label: string;
+  fieldSpec?: {
+    doc: string
+  }
+};
+
+
+export default class FieldUrl extends React.Component<FieldUrlProps> {
+  render () {
+    return (
+      <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+        <InputUrl {...this.props} />
+      </Block>
+    );
+  }
+}
+

src/components/Fieldset.tsx

@@ -0,0 +1,66 @@
+import React, { ReactElement } from 'react'
+import FieldDocLabel from './FieldDocLabel'
+import Doc from './Doc'
+
+type FieldsetProps = {
+  label?: string,
+  fieldSpec?: { doc?: string },
+  action?: ReactElement,
+};
+
+type FieldsetState = {
+  showDoc: boolean
+};
+
+let IDX = 0;
+
+export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
+  _labelId: string;
+
+  constructor (props: FieldsetProps) {
+    super(props);
+    this._labelId = `fieldset_label_${(IDX++)}`;
+    this.state = {
+      showDoc: false,
+    }
+  }
+
+  onToggleDoc = (val: boolean) => {
+    this.setState({
+      showDoc: val
+    });
+  }
+
+  render () {
+    return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
+      {this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          <FieldDocLabel
+            label={this.props.label}
+            onToggleDoc={this.onToggleDoc}
+            fieldSpec={this.props.fieldSpec}
+          />
+        </div>
+      }
+      {!this.props.fieldSpec &&
+        <div className="maputnik-input-block-label">
+          {this.props.label}
+        </div>
+      }
+      <div className="maputnik-input-block-action">
+        {this.props.action}
+      </div>
+      <div className="maputnik-input-block-content">
+        {this.props.children}
+      </div>
+      {this.props.fieldSpec &&
+        <div
+          className="maputnik-doc-inline"
+          style={{display: this.state.showDoc ? '' : 'none'}}
+        >
+          <Doc fieldSpec={this.props.fieldSpec} />
+        </div>
+      }
+    </div>
+  }
+}

src/components/FilterEditor.tsx

@@ -0,0 +1,315 @@
+import React from 'react'
+import {mdiTableRowPlusAfter} from '@mdi/js';
+import {isEqual} from 'lodash';
+import {ExpressionSpecification, LegacyFilterSpecification, StyleSpecification} from 'maplibre-gl'
+import {latest, migrate, convertFilter} from '@maplibre/maplibre-gl-style-spec'
+import {mdiFunctionVariant} from '@mdi/js';
+
+import {combiningFilterOps} from '../libs/filterops'
+import InputSelect from './InputSelect'
+import Block from './Block'
+import SingleFilterEditor from './SingleFilterEditor'
+import FilterEditorBlock from './FilterEditorBlock'
+import InputButton from './InputButton'
+import Doc from './Doc'
+import ExpressionProperty from './_ExpressionProperty';
+
+
+function combiningFilter(props: FilterEditorProps): LegacyFilterSpecification | ExpressionSpecification {
+  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] as LegacyFilterSpecification | ExpressionSpecification;
+}
+
+function migrateFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
+  // This "any" can be removed in latest version of maplibre where maplibre re-exported types from style-spec
+  return (migrate(createStyleFromFilter(filter) as any).layers[0] as any).filter;
+}
+
+function createStyleFromFilter(filter: LegacyFilterSpecification | ExpressionSpecification): StyleSpecification & {id: string} {
+  return {
+    "id": "tmp",
+    "version": 8,
+    "name": "Empty Style",
+    "metadata": {"maputnik:renderer": "mlgljs"},
+    "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,
+      },
+    ],
+  };
+}
+
+const FILTER_OPS = [
+  "all",
+  "any",
+  "none"
+];
+
+// If we convert a filter that is an expression to an expression it'll remain the same in value
+function checkIfSimpleFilter (filter: LegacyFilterSpecification | ExpressionSpecification) {
+  if (filter.length === 1 && FILTER_OPS.includes(filter[0])) {
+    return true;
+  }
+  const expression = convertFilter(filter);
+  return !isEqual(expression, filter);
+}
+
+function hasCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
+  return combiningFilterOps.indexOf(filter[0]) >= 0
+}
+
+function hasNestedCombiningFilter(filter: LegacyFilterSpecification | ExpressionSpecification) {
+  if(hasCombiningFilter(filter)) {
+    return filter.slice(1).map(f => hasCombiningFilter(f as any)).filter(f => f == true).length > 0
+  }
+  return false
+}
+
+type FilterEditorProps = {
+  /** Properties of the vector layer and the available fields */
+  properties?: {[key:string]: any}
+  filter?: any[]
+  errors?: {[key:string]: any}
+  onChange(value: LegacyFilterSpecification | ExpressionSpecification): unknown
+};
+
+type FilterEditorState = {
+  showDoc: boolean
+  displaySimpleFilter: boolean
+  valueIsSimpleFilter?: boolean
+};
+
+export default class FilterEditor extends React.Component<FilterEditorProps, FilterEditorState> {
+  static defaultProps = {
+    filter: ["all"],
+  }
+
+  constructor (props: FilterEditorProps) {
+    super(props);
+    this.state = {
+      showDoc: false,
+      displaySimpleFilter: checkIfSimpleFilter(combiningFilter(props)),
+    };
+  }
+
+  // Convert filter to combining filter
+  onFilterPartChanged(filterIdx: number, newPart: any[]) {
+    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
+    newFilter[filterIdx] = newPart
+    this.props.onChange(newFilter)
+  }
+
+  deleteFilterItem(filterIdx: number) {
+    const newFilter = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
+    newFilter.splice(filterIdx + 1, 1)
+    this.props.onChange(newFilter)
+  }
+
+  addFilterItem = () => {
+    const newFilterItem = combiningFilter(this.props).slice(0) as LegacyFilterSpecification | ExpressionSpecification
+    (newFilterItem as any[]).push(['==', 'name', ''])
+    this.props.onChange(newFilterItem)
+  }
+
+  onToggleDoc = (val: boolean) => {
+    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: FilterEditorProps, currentState: FilterEditorState) {
+    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"] as LegacyFilterSpecification | ExpressionSpecification;
+
+    const isNestedCombiningFilter = displaySimpleFilter && hasNestedCombiningFilter(combiningFilter(this.props));
+
+    if (isNestedCombiningFilter) {
+      return <div className="maputnik-filter-editor-unsupported">
+        <p>
+          Nested filters are not supported.
+        </p>
+        <InputButton
+          onClick={this.makeExpression}
+          title="Convert to expression"
+        >
+          <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
+        </InputButton>
+      </div>
+    }
+    else if (displaySimpleFilter) {
+      const filter = combiningFilter(this.props);
+      let combiningOp = filter[0];
+      let filters = filter.slice(1) as (LegacyFilterSpecification | ExpressionSpecification)[];
+
+      const actions = (
+        <div>
+          <InputButton
+            onClick={this.makeExpression}
+            title="Convert to expression"
+            className="maputnik-make-zoom-function"
+          >
+            <svg style={{width:"14px", height:"14px", verticalAlign: "middle"}} viewBox="0 0 24 24">
+              <path fill="currentColor" d={mdiFunctionVariant} />
+            </svg>
+          </InputButton>
+        </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 (
+        <>
+          <Block
+            key="top"
+            fieldSpec={fieldSpec}
+            label={"Filter"}
+            action={actions}
+          >
+            <InputSelect
+              value={combiningOp}
+              onChange={(v: [string, any]) => this.onFilterPartChanged(0, v)}
+              options={[["all", "every filter matches"], ["none", "no filter matches"], ["any", "any filter matches"]]}
+            />
+          </Block>
+          {editorBlocks}
+          <div
+            key="buttons"
+            className="maputnik-filter-editor-add-wrapper"
+          >
+            <InputButton
+              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
+            </InputButton>
+          </div>
+          <div
+            key="doc"
+            className="maputnik-doc-inline"
+            style={{display: this.state.showDoc ? '' : 'none'}}
+          >
+            <Doc 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/FilterEditorBlock.tsx

@@ -1,23 +1,22 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import Button from '../Button'
-import DeleteIcon from 'react-icons/lib/md/delete'
+import InputButton from './InputButton'
+import {MdDelete} from 'react-icons/md'
 
-class FilterEditorBlock extends React.Component {
-  static propTypes = {
-    onDelete: PropTypes.func.isRequired,
-    children: PropTypes.element.isRequired,
-  }
+type FilterEditorBlockProps = {
+  onDelete(...args: unknown[]): unknown
+};
 
+export default class FilterEditorBlock extends React.Component<FilterEditorBlockProps> {
   render() {
     return <div className="maputnik-filter-editor-block">
       <div className="maputnik-filter-editor-block-action">
-        <Button
+        <InputButton
           className="maputnik-delete-filter"
           onClick={this.props.onDelete}
+          title="Delete filter block"
         >
-          <DeleteIcon />
-        </Button>
+          <MdDelete />
+        </InputButton>
       </div>
       <div className="maputnik-filter-editor-block-content">
         {this.props.children}
@@ -26,4 +25,3 @@ class FilterEditorBlock extends React.Component {
   }
 }
 
-export default FilterEditorBlock

src/components/IconBackground.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class BackgroundIcon extends React.Component {
+export default class IconBackground extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconCircle.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class FillIcon extends React.Component {
+export default class IconCircle extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconFill.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class FillIcon extends React.Component {
+export default class IconFill extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconLayer.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import IconLine from './IconLine'
+import IconFill from './IconFill'
+import IconSymbol from './IconSymbol'
+import IconBackground from './IconBackground'
+import IconCircle from './IconCircle'
+import IconMissing from './IconMissing'
+
+type IconLayerProps = {
+  type: string
+  style?: object
+  className?: string
+};
+
+export default class IconLayer extends React.Component<IconLayerProps> {
+  render() {
+    const iconProps = { style: this.props.style }
+    switch(this.props.type) {
+      case 'fill-extrusion': return <IconBackground {...iconProps} />
+      case 'raster': return <IconFill {...iconProps} />
+      case 'hillshade': return <IconFill {...iconProps} />
+      case 'heatmap': return <IconFill {...iconProps} />
+      case 'fill': return <IconFill {...iconProps} />
+      case 'background': return <IconBackground {...iconProps} />
+      case 'line': return <IconLine {...iconProps} />
+      case 'symbol': return <IconSymbol {...iconProps} />
+      case 'circle': return <IconCircle {...iconProps} />
+      default: return <IconMissing {...iconProps} />
+    }
+  }
+}
+

src/components/IconLine.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class FillIcon extends React.Component {
+export default class IconLine extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/IconMissing.tsx

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

src/components/IconSymbol.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import IconBase from 'react-icon-base'
 
 
-export default class SymbolIcon extends React.Component {
+export default class IconSymbol extends React.Component {
   render() {
     return (
       <IconBase viewBox="0 0 20 20" {...this.props}>

src/components/InputArray.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import InputString from './InputString'
+import InputNumber from './InputNumber'
+
+export type FieldArrayProps = {
+  value: (string | number | undefined)[]
+  type?: string
+  length?: number
+  default?: (string | number | undefined)[]
+  onChange?(value: (string | number | undefined)[] | undefined): unknown
+  'aria-label'?: string
+  label?: string
+};
+
+type FieldArrayState = {
+  value: (string | number | undefined)[]
+  initialPropsValue: unknown[]
+}
+
+export default class FieldArray extends React.Component<FieldArrayProps, FieldArrayState> {
+  static defaultProps = {
+    value: [],
+    default: [],
+  }
+
+  constructor (props: FieldArrayProps) {
+    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: FieldArrayProps, state: FieldArrayState) {
+    const value: any[] = [];
+    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: unknown[]) {
+    return Array(this.props.length).fill(null).every((_, i) => {
+      const val = value[i]
+      return !(val === undefined || val === "");
+    });
+  }
+
+  changeValue(idx: number, newValue: string | number | undefined) {
+    const value = this.state.value.slice(0);
+    value[idx] = newValue;
+
+    this.setState({
+      value,
+    }, () => {
+      if (this.isComplete(value) && this.props.onChange) {
+        this.props.onChange(value);
+      }
+      else if (this.props.onChange){
+        // 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 <InputNumber
+          key={i}
+          default={containsValues || !this.props.default ? undefined : this.props.default[i] as number}
+          value={value[i] as number}
+          required={containsValues ? true : false}
+          onChange={(v) => this.changeValue(i, v)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      } else {
+        return <InputString
+          key={i}
+          default={containsValues || !this.props.default ? undefined : this.props.default[i] as string}
+          value={value[i] as string}
+          required={containsValues ? true : false}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+    })
+
+    return (
+      <div className="maputnik-array">
+        {inputs}
+      </div>
+    )
+  }
+}
+

src/components/InputAutocomplete.tsx

@@ -1,34 +1,33 @@
 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
+export type InputAutocompleteProps = {
+  value?: string
+  options: any[]
+  onChange(value: string | undefined): unknown
+  keepMenuWithinWindowBounds?: boolean
+  'aria-label'?: string
+};
+
+export default class InputAutocomplete extends React.Component<InputAutocompleteProps> {
+  state = {
+    maxHeight: MAX_HEIGHT
   }
 
+  autocompleteMenuEl: HTMLDivElement | null = null;
+
   static defaultProps = {
     onChange: () => {},
     options: [],
   }
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      maxHeight: MAX_HEIGHT
-    };
-  }
-
   calcMaxHeight() {
     if(this.props.keepMenuWithinWindowBounds) {
-      const maxHeight = window.innerHeight - this.autocompleteMenuEl.getBoundingClientRect().top;
+      const maxHeight = window.innerHeight - this.autocompleteMenuEl!.getBoundingClientRect().top;
       const limitedMaxHeight = Math.min(maxHeight, MAX_HEIGHT);
 
       if(limitedMaxHeight != this.state.maxHeight) {
@@ -38,6 +37,7 @@ class AutocompleteInput extends React.Component {
       }
     }
   }
+
   componentDidMount() {
     this.calcMaxHeight();
   }
@@ -46,6 +46,10 @@ class AutocompleteInput extends React.Component {
     this.calcMaxHeight();
   }
 
+  onChange(v: string) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     return <div
       ref={(el) => {
@@ -54,24 +58,30 @@ class AutocompleteInput extends React.Component {
     >
       <Autocomplete
         menuStyle={{
-          position: "absolute",
+          position: "fixed",
           overflow: "auto",
-          maxHeight: this.state.maxHeight
+          maxHeight: this.state.maxHeight,
+          zIndex: '998'
         }}
         wrapperProps={{
           className: "maputnik-autocomplete",
-          style: null
+          style: {}
         }}
         inputProps={{
-          className: "maputnik-string"
+          'aria-label': this.props['aria-label'],
+          className: "maputnik-string",
+          spellCheck: false
         }}
         value={this.props.value}
         items={this.props.options}
         getItemValue={(item) => item[0]}
-        onSelect={v => this.props.onChange(v)}
-        onChange={(e, v) => this.props.onChange(v)}
-        shouldItemRender={(item, value) => {
-          return item[0].toLowerCase().indexOf(value.toLowerCase()) > -1
+        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
+          }
+          return false
         }}
         renderItem={(item, isHighlighted) => (
           <div
@@ -89,4 +99,4 @@ class AutocompleteInput extends React.Component {
   }
 }
 
-export default AutocompleteInput
+

src/components/InputButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import classnames from 'classnames'
+
+type InputButtonProps = {
+  "data-wd-key"?: string
+  "aria-label"?: string
+  onClick?(...args: unknown[]): unknown
+  style?: object
+  className?: string
+  children?: React.ReactNode
+  disabled?: boolean
+  type?: typeof HTMLButtonElement.prototype.type
+  id?: string
+  title?: string
+};
+
+export default class InputButton extends React.Component<InputButtonProps> {
+  render() {
+    return <button
+      id={this.props.id}
+      title={this.props.title}
+      type={this.props.type}
+      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>
+  }
+}

src/components/InputCheckbox.tsx

@@ -1,20 +1,28 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-class CheckboxInput extends React.Component {
-  static propTypes = {
-    value: PropTypes.bool.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
+export type InputCheckboxProps = {
+  value?: boolean
+  style?: object
+  onChange(...args: unknown[]): unknown
+};
+
+export default class InputCheckbox extends React.Component<InputCheckboxProps> {
+  static defaultProps = {
+    value: false,
+  }
+
+  onChange = () => {
+    this.props.onChange(!this.props.value);
   }
 
   render() {
-    return <label className="maputnik-checkbox-wrapper">
+    return <div className="maputnik-checkbox-wrapper">
       <input
         className="maputnik-checkbox"
         type="checkbox"
         style={this.props.style}
-        onChange={e => this.props.onChange(!this.props.value)}
+        onChange={this.onChange}
+        onClick={this.onChange}
         checked={this.props.value}
       />
       <div className="maputnik-checkbox-box">
@@ -24,8 +32,6 @@ class CheckboxInput extends React.Component {
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>
-    </label>
+    </div>
   }
-}
-
-export default CheckboxInput
+}

src/components/InputColor.tsx

@@ -1,35 +1,44 @@
 import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
-import PropTypes from 'prop-types'
+import {ColorResult} from 'react-color';
+import lodash from 'lodash';
 
-function formatColor(color) {
+function formatColor(color: ColorResult): string {
   const rgb = color.rgb
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
 }
 
+export type InputColorProps = {
+  onChange(...args: unknown[]): unknown
+  name?: string
+  value?: string
+  doc?: string
+  style?: object
+  default?: string
+  'aria-label'?: string
+};
+
 /*** Number fields with support for min, max and units and documentation*/
-class ColorField extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string,
-    doc: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
+export default class InputColor extends React.Component<InputColorProps> {
+  state = {
+    pickerOpened: false
+  }
+  colorInput: HTMLInputElement | null = null;
+
+  constructor (props: InputColorProps) {
+    super(props);
+    this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
   }
 
-  constructor(props) {
-    super(props)
-    this.state = {
-      pickerOpened: false,
-    }
+  onChangeNoCheck(v: string) {
+    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() {
+  calcPickerOffset = () => {
     const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
@@ -45,7 +54,7 @@ class ColorField extends React.Component {
     }
   }
 
-  togglePicker() {
+  togglePicker = () => {
     this.setState({ pickerOpened: !this.state.pickerOpened })
   }
 
@@ -60,32 +69,36 @@ class ColorField extends React.Component {
     }
   }
 
+  onChange (v: string) {
+    this.props.onChange(v === "" ? undefined : v);
+  }
+
   render() {
     const offset = this.calcPickerOffset()
-    var currentColor = this.color.object()
-    currentColor = {
+    const currentColor = this.color.object();
+    const currentChromeColor = {
       r: currentColor.r,
       g: currentColor.g,
       b: currentColor.b,
       // Rename alpha -> a for ChromePicker
-      a: currentColor.alpha
+      a: currentColor.alpha!
     }
 
     const picker = <div
       className="maputnik-color-picker-offset"
       style={{
-	      position: 'fixed',
-	      zIndex: 1,
+          position: 'fixed',
+          zIndex: 1,
         left: offset.left,
         top: offset.top,
       }}>
       <ChromePicker
-        color={currentColor}
-        onChange={c => this.props.onChange(formatColor(c))}
+        color={currentChromeColor}
+        onChange={c => this.onChangeNoCheck(formatColor(c))}
       />
       <div
         className="maputnik-color-picker-offset"
-        onClick={this.togglePicker.bind(this)}
+        onClick={this.togglePicker}
         style={{
           zIndex: -1,
           position: 'fixed',
@@ -105,17 +118,19 @@ class ColorField extends React.Component {
       {this.state.pickerOpened && picker}
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
+        aria-label={this.props['aria-label']}
+        spellCheck="false"
+        autoComplete="off"
         className="maputnik-color"
         ref={(input) => this.colorInput = input}
-        onClick={this.togglePicker.bind(this)}
+        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.props.onChange(e.target.value)}
+        onChange={(e) => this.onChange(e.target.value)}
       />
     </div>
   }
 }
 
-export default ColorField

src/components/InputDynamicArray.tsx

@@ -0,0 +1,144 @@
+import React from 'react'
+import capitalize from 'lodash.capitalize'
+import {MdDelete} from 'react-icons/md'
+
+import InputString from './InputString'
+import InputNumber from './InputNumber'
+import InputButton from './InputButton'
+import FieldDocLabel from './FieldDocLabel'
+import InputEnum from './InputEnum'
+import InputUrl from './InputUrl'
+
+
+export type FieldDynamicArrayProps = {
+  value?: (string | number | undefined)[]
+  type?: 'url' | 'number' | 'enum' | 'string'
+  default?: (string | number | undefined)[]
+  onChange?(values: (string | number | undefined)[] | undefined): unknown
+  style?: object
+  fieldSpec?: {
+    values?: any
+  }
+  'aria-label'?: string
+  label: string
+};
+
+
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+  changeValue(idx: number, newValue: string | number | undefined) {
+    const values = this.values.slice(0)
+    values[idx] = newValue
+    if (this.props.onChange) 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 === 'url') {
+      values.push("");
+    }
+    else if (this.props.type === 'enum') {
+      const {fieldSpec} = this.props;
+      const defaultValue = Object.keys(fieldSpec!.values)[0];
+      values.push(defaultValue);
+    } else {
+      values.push("")
+    }
+
+    if (this.props.onChange) this.props.onChange(values)
+  }
+
+  deleteValue(valueIdx: number) {
+    const values = this.values.slice(0)
+    values.splice(valueIdx, 1)
+
+    if (this.props.onChange) this.props.onChange(values.length > 0 ? values : undefined);
+  }
+
+  render() {
+    const inputs = this.values.map((v, i) => {
+      const deleteValueBtn= <DeleteValueInputButton onClick={this.deleteValue.bind(this, i)} />
+      let input;
+      if(this.props.type === 'url') {
+        input = <InputUrl
+          value={v as string}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else if (this.props.type === 'number') {
+        input = <InputNumber
+          value={v as number}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else if (this.props.type === 'enum') {
+        const options = Object.keys(this.props.fieldSpec?.values).map(v => [v, capitalize(v)]);
+        input = <InputEnum
+          options={options}
+          value={v as string}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+      else {
+        input = <InputString
+          value={v as string}
+          onChange={this.changeValue.bind(this, i)}
+          aria-label={this.props['aria-label'] || this.props.label}
+        />
+      }
+
+      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}
+        <InputButton
+          className="maputnik-array-add-value"
+          onClick={this.addValue}
+        >
+          Add value
+        </InputButton>
+      </div>
+    );
+  }
+}
+
+type DeleteValueInputButtonProps = {
+  onClick?(...args: unknown[]): unknown
+};
+
+class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps> {
+  render() {
+    return <InputButton
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+      title="Remove array item"
+    >
+      <FieldDocLabel
+        label={<MdDelete />}
+      />
+    </InputButton>
+  }
+}
+

src/components/InputEnum.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import InputSelect from './InputSelect'
+import InputMultiInput from './InputMultiInput'
+
+
+function optionsLabelLength(options: any[]) {
+  let sum = 0;
+  options.forEach(([_, label]) => {
+    sum += label.length
+  })
+  return sum
+}
+
+
+export type InputEnumProps = {
+  "data-wd-key"?: string
+  value?: string
+  style?: object
+  default?: string
+  name?: string
+  onChange(...args: unknown[]): unknown
+  options: any[]
+  'aria-label'?: string
+  label?: string
+};
+
+
+export default class InputEnum extends React.Component<InputEnumProps> {
+  render() {
+    const {options, value, onChange, name, label} = this.props;
+
+    if(options.length <= 3 && optionsLabelLength(options) <= 20) {
+      return <InputMultiInput
+        name={name}
+        options={options}
+        value={(value || this.props.default)!}
+        onChange={onChange}
+        aria-label={this.props['aria-label'] || label}
+      />
+    } else {
+      return <InputSelect
+        options={options}
+        value={(value || this.props.default)!}
+        onChange={onChange}
+        aria-label={this.props['aria-label'] || label}
+      />
+    }
+  }
+}
+

src/components/InputFont.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import InputAutocomplete from './InputAutocomplete'
+
+export type FieldFontProps = {
+  name: string
+  value?: string[]
+  default?: string[]
+  fonts?: unknown[]
+  style?: object
+  onChange(...args: unknown[]): unknown
+  'aria-label'?: string
+};
+
+export default class FieldFont extends React.Component<FieldFontProps> {
+  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: number, newValue: string) {
+    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 <li
+        key={i}
+      >
+        <InputAutocomplete
+          aria-label={this.props['aria-label'] || this.props.name}
+          value={value}
+          options={this.props.fonts?.map(f => [f, f])}
+          onChange={this.changeFont.bind(this, i)}
+        />
+      </li>
+    })
+
+    return (
+      <ul className="maputnik-font">
+        {inputs}
+      </ul>
+    );
+  }
+}

src/components/InputJson.tsx

@@ -0,0 +1,176 @@
+import React from 'react'
+import classnames from 'classnames';
+import CodeMirror, { ModeSpec } 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 stringifyPretty from 'json-stringify-pretty-compact'
+import '../util/codemirror-mgl';
+
+
+export type InputJsonProps = {
+  layer: any
+  maxHeight?: number
+  onChange?(...args: unknown[]): unknown
+  lineNumbers?: boolean
+  lineWrapping?: boolean
+  getValue?(data: any): string
+  gutters?: string[]
+  className?: string
+  onFocus?(...args: unknown[]): unknown
+  onBlur?(...args: unknown[]): unknown
+  onJSONValid?(...args: unknown[]): unknown
+  onJSONInvalid?(...args: unknown[]): unknown
+  mode?: ModeSpec<any>
+  lint?: boolean | object
+};
+
+type InputJsonState = {
+  isEditing: boolean
+  showMessage: boolean
+  prevValue: string
+};
+
+export default class InputJson extends React.Component<InputJsonProps, InputJsonState> {
+  static defaultProps = {
+    lineNumbers: true,
+    lineWrapping: false,
+    gutters: ["CodeMirror-lint-markers"],
+    getValue: (data: any) => {
+      return stringifyPretty(data, {indent: 2, maxLength: 40});
+    },
+    onFocus: () => {},
+    onBlur: () => {},
+    onJSONInvalid: () => {},
+    onJSONValid: () => {},
+  }
+  _keyEvent: string;
+  _doc: CodeMirror.Editor | undefined;
+  _el: HTMLDivElement | null = null;
+  _cancelNextChange: boolean = false;
+
+  constructor(props: InputJsonProps) {
+    super(props);
+    this._keyEvent = "keyboard";
+    this.state = {
+      isEditing: false,
+      showMessage: 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);
+  }
+
+  onPointerDown = () => {
+    this._keyEvent = "pointer";
+  }
+
+  onFocus = () => {
+    if (this.props.onFocus) this.props.onFocus();
+    this.setState({
+      isEditing: true,
+      showMessage: (this._keyEvent === "keyboard"),
+    });
+  }
+
+  onBlur = () => {
+    this._keyEvent = "keyboard";
+    if (this.props.onBlur) this.props.onBlur();
+    this.setState({
+      isEditing: false,
+      showMessage: false,
+    });
+  }
+
+  componentWillUnMount () {
+    this._doc!.off('change', this.onChange);
+    this._doc!.off('focus', this.onFocus);
+    this._doc!.off('blur', this.onBlur);
+  }
+
+  componentDidUpdate(prevProps: InputJsonProps) {
+    if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
+      this._cancelNextChange = true;
+      this._doc!.setValue(
+        this.props.getValue!(this.props.layer),
+      )
+    }
+  }
+
+  onChange = (_e: unknown) => {
+    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) {
+        this.props.onJSONInvalid();
+      }
+      else {
+        if (this.props.onChange) this.props.onChange(parsedLayer)
+        if (this.props.onJSONValid) this.props.onJSONValid();
+      }
+    }
+
+    this.setState({
+      prevValue: newCode,
+    });
+  }
+
+  render() {
+    const {showMessage} = this.state;
+    const style = {} as {maxHeight?: number};
+    if (this.props.maxHeight) {
+      style.maxHeight = this.props.maxHeight;
+    }
+
+    return <div className="JSONEditor" onPointerDown={this.onPointerDown} aria-hidden="true">
+      <div className={classnames("JSONEditor__message", {"JSONEditor__message--on": showMessage})}>
+        Press <kbd>ESC</kbd> to lose focus
+      </div>
+      <div
+        className={classnames("codemirror-container", this.props.className)}
+        ref={(el) => this._el = el}
+        style={style}
+      />
+    </div>
+  }
+}

src/components/InputMultiInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export type InputMultiInputProps = {
+  name?: string
+  value: string
+  options: any[]
+  onChange(...args: unknown[]): unknown
+  'aria-label'?: string
+};
+
+export default class InputMultiInput extends React.Component<InputMultiInputProps> {
+  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 radios = options.map(([val, label])=> {
+      return <label
+        key={val}
+        className={classnames("maputnik-radio-as-button", {"maputnik-button-selected": val === selectedValue})}
+      >
+        <input type="radio"
+          name={this.props.name}
+          onChange={_e => this.props.onChange(val)}
+          value={val}
+          checked={val === selectedValue}
+        />
+        {label}
+      </label>
+    })
+
+    return <fieldset className="maputnik-multibutton" aria-label={this.props['aria-label']}>
+      {radios}
+    </fieldset>
+  }
+}
+
+

src/components/InputNumber.tsx

@@ -0,0 +1,241 @@
+import React, { BaseSyntheticEvent } from 'react'
+
+let IDX = 0;
+
+export type InputNumberProps = {
+  value?: number
+  default?: number
+  min?: number
+  max?: number
+  onChange?(value: number | undefined): unknown
+  allowRange?: boolean
+  rangeStep?: number
+  wdKey?: string
+  required?: boolean
+  "aria-label"?: string
+};
+
+type InputNumberState = {
+  uuid: number
+  editing: boolean
+  editingRange?: boolean
+  value?: number
+  dirtyValue?: number
+}
+
+export default class InputNumber extends React.Component<InputNumberProps, InputNumberState> {
+  static defaultProps = {
+    rangeStep: 1
+  }
+  _keyboardEvent: boolean = false;
+
+  constructor(props: InputNumberProps) {
+    super(props)
+    this.state = {
+      uuid: IDX++,
+      editing: false,
+      value: props.value,
+      dirtyValue: props.value,
+    }
+  }
+
+  static getDerivedStateFromProps(props: InputNumberProps, state: InputNumberState) {
+    if (!state.editing && props.value !== state.value) {
+      return {
+        value: props.value,
+        dirtyValue: props.value,
+      };
+    }
+    return null;
+  }
+
+  changeValue(newValue: number | string | undefined) {
+    const value = (newValue === "" || newValue === undefined) ?
+      undefined : +newValue;
+
+    const hasChanged = this.props.value !== value;
+    if(this.isValid(value) && hasChanged) {
+      if (this.props.onChange) this.props.onChange(value)
+      this.setState({
+        value: value,
+      });
+    }
+    else if (!this.isValid(value) && hasChanged) {
+      this.setState({
+        value: undefined,
+      });
+    }
+
+    this.setState({
+      dirtyValue: newValue === "" ? undefined : value,
+    })
+  }
+
+  isValid(v: number | string | undefined) {
+    if (v === undefined) {
+      return true;
+    }
+
+    const value = +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: BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
+    let value = parseFloat(e.target.value);
+    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});
+    if (this.props.onChange) 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}
+          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?.toString()}
+          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
+        aria-label={this.props['aria-label']}
+        spellCheck="false"
+        className="maputnik-number"
+        placeholder={this.props.default?.toString()}
+        value={value === undefined ? "" : value}
+        onChange={e => this.changeValue(e.target.value)}
+        onFocus={() => {
+          this.setState({editing: true});
+        }}
+        onBlur={this.resetValue}
+        required={this.props.required}
+      />
+    }
+  }
+}
+
+

src/components/InputSelect.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export type InputSelectProps = {
+  value: string
+  "data-wd-key"?: string
+  options: [string, any][] | string[]
+  style?: object
+  onChange(value: string | [string, any]): unknown
+  title?: string
+  'aria-label'?: string
+};
+
+export default class InputSelect extends React.Component<InputSelectProps> {
+  render() {
+    let options = this.props.options;
+    if(options.length > 0 && !Array.isArray(options[0])) {
+      options = options.map((v) => [v, v]) as [string, any][];
+    }
+
+    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)}
+      aria-label={this.props['aria-label']}
+    >
+      { options.map(([val, label]) => <option key={val} value={val}>{label}</option>) }
+    </select>
+  }
+}
+
+

src/components/InputSpec.tsx

@@ -0,0 +1,126 @@
+import React, { ReactElement } from 'react'
+
+import InputColor, { InputColorProps } from './InputColor'
+import InputNumber, { InputNumberProps } from './InputNumber'
+import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
+import InputString, { InputStringProps } from './InputString'
+import InputArray, { FieldArrayProps } from './InputArray'
+import InputDynamicArray, { FieldDynamicArrayProps } from './InputDynamicArray'
+import InputFont, { FieldFontProps } from './InputFont'
+import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
+import InputEnum, { InputEnumProps } from './InputEnum'
+import capitalize from 'lodash.capitalize'
+
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+
+export type SpecFieldProps = {
+  onChange?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
+  fieldName?: string
+  fieldSpec?: {
+    default?: unknown
+    type?: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
+    minimum?: number
+    maximum?: number
+    values?: unknown[]
+    length?: number
+    value?: string
+  }
+  value?: string | number | unknown[] | boolean
+  /** Override the style of the field */
+  style?: object
+  'aria-label'?: string
+  error?: unknown[]
+  label?: string
+  action?: ReactElement
+};
+
+/** Display any field from the Maplibre GL style spec and
+ * choose the correct field component based on the @{fieldSpec}
+ * to display @{value}. */
+export default class SpecField extends React.Component<SpecFieldProps> {
+
+  childNodes() {
+    const commonProps = {
+      error: this.props.error,
+      fieldSpec: this.props.fieldSpec,
+      label: this.props.label,
+      action: this.props.action,
+      style: this.props.style,
+      value: this.props.value,
+      default: this.props.fieldSpec?.default,
+      name: this.props.fieldName,
+      onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
+      'aria-label': this.props['aria-label'],
+    }
+    switch(this.props.fieldSpec?.type) {
+      case 'number': return (
+        <InputNumber
+          {...commonProps as InputNumberProps}
+          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 <InputEnum
+          {...commonProps as Omit<InputEnumProps, "options">}
+          options={options}
+        />
+      case 'resolvedImage':
+      case 'formatted':
+      case 'string':
+        if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
+          const options = this.props.fieldSpec.values || [];
+          return <InputAutocomplete
+            {...commonProps as Omit<InputAutocompleteProps, "options">}
+            options={options.map(f => [f, f])}
+          />
+        } else {
+          return <InputString
+            {...commonProps as InputStringProps}
+          />
+        }
+      case 'color': return (
+        <InputColor
+          {...commonProps as InputColorProps}
+        />
+      )
+      case 'boolean': return (
+        <InputCheckbox
+          {...commonProps as InputCheckboxProps}
+        />
+      )
+      case 'array':
+        if(this.props.fieldName === 'text-font') {
+          return <InputFont
+            {...commonProps as FieldFontProps}
+            fonts={this.props.fieldSpec.values}
+          />
+        } else {
+          if (this.props.fieldSpec.length) {
+            return <InputArray
+              {...commonProps as FieldArrayProps}
+              type={this.props.fieldSpec.value}
+              length={this.props.fieldSpec.length}
+            />
+          } else {
+            return <InputDynamicArray
+              {...commonProps as FieldDynamicArrayProps}
+              fieldSpec={this.props.fieldSpec}
+              type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
+            />
+          }
+        }
+      default: return null
+    }
+  }
+
+  render() {
+    return (
+      <div data-wd-key={"spec-field:"+this.props.fieldName}>
+        {this.childNodes()}
+      </div>
+    );
+  }
+}

src/components/InputString.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+
+export type InputStringProps = {
+  "data-wd-key"?: string
+  value?: string
+  style?: object
+  default?: string
+  onChange?(value: string | undefined): unknown
+  onInput?(value: string | undefined): unknown
+  multi?: boolean
+  required?: boolean
+  disabled?: boolean
+  spellCheck?: boolean
+  'aria-label'?: string
+  title?: string
+};
+
+type InputStringState = {
+  editing: boolean
+  value?: string
+}
+
+export default class InputString extends React.Component<InputStringProps, InputStringState> {
+  static defaultProps = {
+    onInput: () => {},
+  }
+
+  constructor(props: InputStringProps) {
+    super(props)
+    this.state = {
+      editing: false,
+      value: props.value || ''
+    }
+  }
+
+  static getDerivedStateFromProps(props: InputStringProps, state: InputStringState) {
+    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, {
+      "aria-label": this.props["aria-label"],
+      "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,
+      title: this.props.title,
+      onChange: (e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
+        this.setState({
+          editing: true,
+          value: e.target.value
+        }, () => {
+          if (this.props.onInput) this.props.onInput(this.state.value);
+        });
+      },
+      onBlur: () => {
+        if(this.state.value!==this.props.value) {
+          this.setState({editing: false});
+          if (this.props.onChange) this.props.onChange(this.state.value);
+        }
+      },
+      onKeyDown: (e) => {
+        if (e.keyCode === 13 && this.props.onChange) {
+          this.props.onChange(this.state.value);
+        }
+      },
+      required: this.props.required,
+    });
+  }
+}
+
+

src/components/InputUrl.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import InputString from './InputString'
+import SmallError from './SmallError'
+
+
+function validate(url: string) {
+  if (url === "") {
+    return;
+  }
+
+  let error;
+  const getProtocol = (url: string) => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.protocol;
+    }
+    catch (err) {
+      return undefined;
+    }
+  };
+  const protocol = getProtocol(url);
+  const isSsl = window.location.protocol === "https:";
+
+  if (!protocol) {
+    error = (
+      <SmallError>
+        Must provide protocol {
+          isSsl
+          ? <code>https://</code>
+          : <><code>http://</code> or <code>https://</code></>
+        }
+      </SmallError>
+    );
+  }
+  else 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;
+}
+
+export type FieldUrlProps = {
+  "data-wd-key"?: string
+  value: string
+  style?: object
+  default?: string
+  onChange(...args: unknown[]): unknown
+  onInput?(...args: unknown[]): unknown
+  multi?: boolean
+  required?: boolean
+  'aria-label'?: string
+  type?: string
+  className?: string
+};
+
+type FieldUrlState = {
+  error?: React.ReactNode
+}
+
+export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlState> {
+  static defaultProps = {
+    onInput: () => {},
+  }
+
+  constructor (props: FieldUrlProps) {
+    super(props);
+    this.state = {
+      error: validate(props.value)
+    };
+  }
+
+  onInput = (url: string) => {
+    this.setState({
+      error: validate(url)
+    });
+    if (this.props.onInput) this.props.onInput(url);
+  }
+
+  onChange = (url: string) => {
+    this.setState({
+      error: validate(url)
+    });
+    this.props.onChange(url);
+  }
+
+  render () {
+    return (
+      <div>
+        <InputString
+          {...this.props}
+          onInput={this.onInput}
+          onChange={this.onChange}
+          aria-label={this.props['aria-label']}
+        />
+        {this.state.error}
+      </div>
+    );
+  }
+}
+