From fa182e66fa7304137d9dc96daf65d2521465f803 Mon Sep 17 00:00:00 2001
From: Harel M <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 23:46:56 +0200
Subject: [PATCH] Migration of jsx files to tsx 1 (#848)

In this PR I have changed some of the jsx files to tsx file.
I'm starting off with the "leafs" so that migration of the rest will be
easier, hopefully.

What I'm basically doing is taking a jsx file, copy paste it into:
https://mskelton.dev/ratchet

And after that I'm fixing the types as needed.
It's not a very long process.

Hopefully more PRs will follow and this will be over soon.
I don't plan to migrate the storybook as I generally don't understand
why is it useful, I'll open an issue to see if anyone thinks
differently.
---
 cypress/e2e/modals.cy.ts                      |   7 +
 package-lock.json                             | 114 ++++++++++++++
 package.json                                  |   8 +
 src/components/{Block.jsx => Block.tsx}       |  56 +++----
 src/components/{Doc.jsx => Doc.tsx}           |  40 +++--
 src/components/FieldArray.jsx                 |  21 ---
 src/components/FieldArray.tsx                 |  19 +++
 src/components/FieldColor.jsx                 |  20 ---
 src/components/FieldColor.tsx                 |  21 +++
 .../{FieldDocLabel.jsx => FieldDocLabel.tsx}  |  26 ++--
 src/components/FieldEnum.jsx                  |  20 ---
 src/components/FieldEnum.tsx                  |  20 +++
 src/components/{FieldId.jsx => FieldId.tsx}   |  15 +-
 src/components/FieldJson.jsx                  |  16 --
 src/components/FieldJson.tsx                  |  13 ++
 .../{FieldMaxZoom.jsx => FieldMaxZoom.tsx}    |  13 +-
 .../{FieldMinZoom.jsx => FieldMinZoom.tsx}    |  13 +-
 src/components/FieldMultiInput.jsx            |  21 ---
 src/components/FieldMultiInput.tsx            |  20 +++
 src/components/FieldNumber.jsx                |  19 ---
 src/components/FieldNumber.tsx                |  20 +++
 src/components/FieldSelect.jsx                |  20 ---
 src/components/FieldSelect.tsx                |  22 +++
 src/components/FieldString.jsx                |  20 ---
 src/components/FieldString.tsx                |  19 +++
 .../{FieldType.jsx => FieldType.tsx}          |  17 +--
 src/components/FieldUrl.jsx                   |  22 ---
 src/components/FieldUrl.tsx                   |  23 +++
 src/components/{Fieldset.jsx => Fieldset.tsx} |  26 ++--
 ...rEditorBlock.jsx => FilterEditorBlock.tsx} |  10 +-
 ...{IconBackground.jsx => IconBackground.tsx} |   0
 .../{IconCircle.jsx => IconCircle.tsx}        |   0
 src/components/{IconFill.jsx => IconFill.tsx} |   0
 .../{IconLayer.jsx => IconLayer.tsx}          |  23 ++-
 src/components/{IconLine.jsx => IconLine.tsx} |   0
 .../{IconMissing.jsx => IconMissing.tsx}      |   0
 .../{IconSymbol.jsx => IconSymbol.tsx}        |   0
 .../{InputArray.jsx => InputArray.tsx}        |  47 +++---
 ...Autocomplete.jsx => InputAutocomplete.tsx} |  28 ++--
 .../{InputButton.jsx => InputButton.tsx}      |  30 ++--
 .../{InputCheckbox.jsx => InputCheckbox.tsx}  |  16 +-
 .../{InputColor.jsx => InputColor.tsx}        |  47 +++---
 ...DynamicArray.jsx => InputDynamicArray.tsx} |  60 ++++----
 .../{InputEnum.jsx => InputEnum.tsx}          |  31 ++--
 .../{InputFont.jsx => InputFont.tsx}          |  24 +--
 .../{InputJson.jsx => InputJson.tsx}          |  92 ++++++------
 ...nputMultiInput.jsx => InputMultiInput.tsx} |  19 ++-
 .../{InputNumber.jsx => InputNumber.tsx}      |  85 ++++++-----
 .../{InputSelect.jsx => InputSelect.tsx}      |  26 ++--
 src/components/InputSpec.jsx                  | 139 ------------------
 src/components/InputSpec.tsx                  | 126 ++++++++++++++++
 .../{InputString.jsx => InputString.tsx}      |  46 +++---
 src/components/{InputUrl.jsx => InputUrl.tsx} |  45 +++---
 src/components/{Modal.jsx => Modal.tsx}       |  26 ++--
 .../{ModalLoading.jsx => ModalLoading.tsx}    |  22 +--
 .../{ModalOpen.jsx => ModalOpen.tsx}          |  70 +++++----
 .../{ModalSettings.jsx => ModalSettings.tsx}  |  47 +++---
 ...{ModalShortcuts.jsx => ModalShortcuts.tsx} |  12 +-
 .../{ModalSurvey.jsx => ModalSurvey.tsx}      |  12 +-
 src/components/ScrollContainer.jsx            |  15 --
 src/components/ScrollContainer.tsx            |  14 ++
 ...ilterEditor.jsx => SingleFilterEditor.tsx} |  38 +++--
 .../{SmallError.jsx => SmallError.tsx}        |  13 +-
 .../{SpecField.jsx => SpecField.tsx}          |  14 +-
 64 files changed, 1009 insertions(+), 859 deletions(-)
 rename src/components/{Block.jsx => Block.tsx} (70%)
 rename src/components/{Doc.jsx => Doc.tsx} (77%)
 delete mode 100644 src/components/FieldArray.jsx
 create mode 100644 src/components/FieldArray.tsx
 delete mode 100644 src/components/FieldColor.jsx
 create mode 100644 src/components/FieldColor.tsx
 rename src/components/{FieldDocLabel.jsx => FieldDocLabel.tsx} (73%)
 delete mode 100644 src/components/FieldEnum.jsx
 create mode 100644 src/components/FieldEnum.tsx
 rename src/components/{FieldId.jsx => FieldId.tsx} (60%)
 delete mode 100644 src/components/FieldJson.jsx
 create mode 100644 src/components/FieldJson.tsx
 rename src/components/{FieldMaxZoom.jsx => FieldMaxZoom.tsx} (72%)
 rename src/components/{FieldMinZoom.jsx => FieldMinZoom.tsx} (72%)
 delete mode 100644 src/components/FieldMultiInput.jsx
 create mode 100644 src/components/FieldMultiInput.tsx
 delete mode 100644 src/components/FieldNumber.jsx
 create mode 100644 src/components/FieldNumber.tsx
 delete mode 100644 src/components/FieldSelect.jsx
 create mode 100644 src/components/FieldSelect.tsx
 delete mode 100644 src/components/FieldString.jsx
 create mode 100644 src/components/FieldString.tsx
 rename src/components/{FieldType.jsx => FieldType.tsx} (78%)
 delete mode 100644 src/components/FieldUrl.jsx
 create mode 100644 src/components/FieldUrl.tsx
 rename src/components/{Fieldset.jsx => Fieldset.tsx} (72%)
 rename src/components/{FilterEditorBlock.jsx => FilterEditorBlock.tsx} (73%)
 rename src/components/{IconBackground.jsx => IconBackground.tsx} (100%)
 rename src/components/{IconCircle.jsx => IconCircle.tsx} (100%)
 rename src/components/{IconFill.jsx => IconFill.tsx} (100%)
 rename src/components/{IconLayer.jsx => IconLayer.tsx} (62%)
 rename src/components/{IconLine.jsx => IconLine.tsx} (100%)
 rename src/components/{IconMissing.jsx => IconMissing.tsx} (100%)
 rename src/components/{IconSymbol.jsx => IconSymbol.tsx} (100%)
 rename src/components/{InputArray.jsx => InputArray.tsx} (67%)
 rename src/components/{InputAutocomplete.jsx => InputAutocomplete.tsx} (80%)
 rename src/components/{InputButton.jsx => InputButton.tsx} (53%)
 rename src/components/{InputCheckbox.jsx => InputCheckbox.tsx} (77%)
 rename src/components/{InputColor.jsx => InputColor.tsx} (79%)
 rename src/components/{InputDynamicArray.jsx => InputDynamicArray.tsx} (70%)
 rename src/components/{InputEnum.jsx => InputEnum.tsx} (58%)
 rename src/components/{InputFont.jsx => InputFont.tsx} (72%)
 rename src/components/{InputJson.jsx => InputJson.tsx} (64%)
 rename src/components/{InputMultiInput.jsx => InputMultiInput.tsx} (67%)
 rename src/components/{InputNumber.jsx => InputNumber.tsx} (74%)
 rename src/components/{InputSelect.jsx => InputSelect.tsx} (53%)
 delete mode 100644 src/components/InputSpec.jsx
 create mode 100644 src/components/InputSpec.tsx
 rename src/components/{InputString.jsx => InputString.tsx} (62%)
 rename src/components/{InputUrl.jsx => InputUrl.tsx} (68%)
 rename src/components/{Modal.jsx => Modal.tsx} (77%)
 rename src/components/{ModalLoading.jsx => ModalLoading.tsx} (64%)
 rename src/components/{ModalOpen.jsx => ModalOpen.tsx} (82%)
 rename src/components/{ModalSettings.jsx => ModalSettings.tsx} (85%)
 rename src/components/{ModalShortcuts.jsx => ModalShortcuts.tsx} (93%)
 rename src/components/{ModalSurvey.jsx => ModalSurvey.tsx} (85%)
 delete mode 100644 src/components/ScrollContainer.jsx
 create mode 100644 src/components/ScrollContainer.tsx
 rename src/components/{SingleFilterEditor.jsx => SingleFilterEditor.tsx} (61%)
 rename src/components/{SmallError.jsx => SmallError.tsx} (54%)
 rename src/components/{SpecField.jsx => SpecField.tsx} (71%)

diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index e5fd505f..911deef6 100644
--- a/cypress/e2e/modals.cy.ts
+++ b/cypress/e2e/modals.cy.ts
@@ -77,11 +77,18 @@ describe("modals", () => {
     });
 
     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");
diff --git a/package-lock.json b/package-lock.json
index 3eada999..24fa6919 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,11 +67,19 @@
         "@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/lodash.capitalize": "^4.2.9",
         "@types/lodash.isequal": "^4.5.8",
         "@types/lodash.throttle": "^4.1.9",
         "@types/react": "^16.14.52",
+        "@types/react-aria-modal": "^4.0.9",
+        "@types/react-autocomplete": "^1.8.9",
+        "@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/uuid": "^9.0.7",
         "@vitejs/plugin-react": "^4.2.0",
         "cors": "^2.8.5",
@@ -4583,6 +4591,39 @@
         "@types/chai": "*"
       }
     },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.15",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.15.tgz",
+      "integrity": "sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==",
+      "dev": true,
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
+    "node_modules/@types/color": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/color/-/color-3.0.6.tgz",
+      "integrity": "sha512-NMiNcZFRUAiUUCCf7zkAelY8eV3aKqfbzyFQlXpPIEeoNDbsEHGpb854V3gzTsGKYj830I5zPuOwU/TP5/cW6A==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-convert": "*"
+      }
+    },
+    "node_modules/@types/color-convert": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/color-convert/-/color-convert-2.0.3.tgz",
+      "integrity": "sha512-2Q6wzrNiuEvYxVQqhh7sXM2mhIhvZR/Paq4FdsQkOMgWsCIkKvSGj8Le1/XalulrmgOzPMqNa0ix+ePY4hTrfg==",
+      "dev": true,
+      "dependencies": {
+        "@types/color-name": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-87W6MJCKZYDhLAx/J1ikW8niMvmGRyY+rpUxWpL1cO7F8Uu5CHuQoFv+R0/L5pgNdW4jTyda42kv60uwVIPjLw==",
+      "dev": true
+    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -4703,6 +4744,15 @@
       "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
       "dev": true
     },
+    "node_modules/@types/lodash.capitalize": {
+      "version": "4.2.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.capitalize/-/lodash.capitalize-4.2.9.tgz",
+      "integrity": "sha512-SV1dav/WbuI816SVig4trFz8ID/m5maVzC8I/E/DejPvmlXvIhw7Y0GWxJ03UhU6qaZOj6qQnR1xxC0mP7ZXoQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/lodash.isequal": {
       "version": "4.5.8",
       "resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.8.tgz",
@@ -4831,6 +4881,34 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-aria-modal": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/react-aria-modal/-/react-aria-modal-4.0.9.tgz",
+      "integrity": "sha512-H8SU5QoB+1ldMGYRHNm1MXfzD5oD+ZdYTrwVzT+KEiFrkTqQG2QdwVc6Ro4/RixnU4LNtMpvF5HKAIfzzGJGjw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-autocomplete": {
+      "version": "1.8.9",
+      "resolved": "https://registry.npmjs.org/@types/react-autocomplete/-/react-autocomplete-1.8.9.tgz",
+      "integrity": "sha512-Il8qJEKvPU0uW+HOPiRHIKxGF61RM6cM5tEnZDmM5ek78OK5kfv04AZbNyqdPsuTnwp8HIRgBnQH2RhgKILjcg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-color": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz",
+      "integrity": "sha512-6K5BAn3zyd8lW8UbckIAVeXGxR82Za9jyGD2DBEynsa7fKaguLDVtjfypzs7fgEV7bULgs7uhds8A8v1wABTvQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "@types/reactcss": "*"
+      }
+    },
     "node_modules/@types/react-dom": {
       "version": "16.9.24",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.24.tgz",
@@ -4840,6 +4918,33 @@
         "@types/react": "^16"
       }
     },
+    "node_modules/@types/react-file-reader-input": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-file-reader-input/-/react-file-reader-input-2.0.4.tgz",
+      "integrity": "sha512-Jqrfn+w42j8t8Q3npMXXKPdk+reIM0UHLKVc3ykrA7q7bN3Z62SGhsClZX0+Edlqm66lcKwmDQl+WMm+Xor7Xg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-icon-base": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@types/react-icon-base/-/react-icon-base-2.1.6.tgz",
+      "integrity": "sha512-ebbN1JjCm6RxBd3HdI1+8VCdiOI4qMjnl9DIHWJFrB/eYLF4mzIgdL34PIqCJBLY3vlwil9v6IHQvzsa8vgMsg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/reactcss": {
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.11.tgz",
+      "integrity": "sha512-0fFy0ubuPlhksId8r9V8nsLcxBAPQnn15g/ERAElgE9L6rOquMj2CapsxqfyBuHlkp0/ndEUVnkYI7MkTtkGpw==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.20.6",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
@@ -4891,6 +4996,15 @@
       "integrity": "sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==",
       "dev": true
     },
+    "node_modules/@types/tern": {
+      "version": "0.23.9",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
+      "integrity": "sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/uuid": {
       "version": "9.0.7",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz",
diff --git a/package.json b/package.json
index 75b11d12..fd9e9624 100644
--- a/package.json
+++ b/package.json
@@ -96,11 +96,19 @@
     "@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/lodash.capitalize": "^4.2.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^16.14.52",
+    "@types/react-aria-modal": "^4.0.9",
+    "@types/react-autocomplete": "^1.8.9",
+    "@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/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.2.0",
     "cors": "^2.8.5",
diff --git a/src/components/Block.jsx b/src/components/Block.tsx
similarity index 70%
rename from src/components/Block.jsx
rename to src/components/Block.tsx
index d3a2bfff..d7fe3709 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.tsx
@@ -1,40 +1,43 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, {SyntheticEvent} from 'react'
 import classnames from 'classnames'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 
-/** Wrap a component with a label */
-export default class Block extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    label: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-    ]),
-    action: PropTypes.element,
-    children: PropTypes.node.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func,
-    fieldSpec: PropTypes.object,
-    wideMode: PropTypes.bool,
-    error: PropTypes.array,
-  }
+type BlockProps = {
+  "data-wd-key"?: string
+  label?: string
+  action?: React.ReactElement
+  style?: object
+  onChange?(...args: unknown[]): unknown
+  fieldSpec?: object
+  wideMode?: boolean
+  error?: unknown[]
+};
 
-  constructor (props) {
+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) {
+  onChange(e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) {
     const value = e.target.value
-    return this.props.onChange(value === "" ? undefined : value)
+    if (this.props.onChange) {
+      return this.props.onChange(value === "" ? undefined : value)
+    }
   }
 
-  onToggleDoc = (val) => {
+  onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
@@ -46,20 +49,17 @@ export default class Block extends React.Component {
    * causing the picker to reopen. This causes a scenario where the picker can
    * never be closed once open.
    */
-  onLabelClick = (event) => {
+  onLabelClick = (event: SyntheticEvent<any, any>) => {
     const el = event.nativeEvent.target;
-    const nativeEvent = event.nativeEvent;
-    const contains = this._blockEl.contains(el);
+    const contains = this._blockEl?.contains(el);
 
     if (event.nativeEvent.target.nodeName !== "INPUT" && !contains) {
       event.stopPropagation();
     }
-		event.preventDefault();
+        event.preventDefault();
   }
 
   render() {
-    const errors = [].concat(this.props.error || []);
-
     return <label style={this.props.style}
       data-wd-key={this.props["data-wd-key"]}
       className={classnames({
diff --git a/src/components/Doc.jsx b/src/components/Doc.tsx
similarity index 77%
rename from src/components/Doc.jsx
rename to src/components/Doc.tsx
index 3285165c..92937522 100644
--- a/src/components/Doc.jsx
+++ b/src/components/Doc.tsx
@@ -1,24 +1,33 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class Doc extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object.isRequired,
+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 headers = {
-      js: "JS",
-      android: "Android",
-      ios: "iOS",
-      macos: "macOS",
-    };
-
     const renderValues = (
       !!values &&
       // HACK: Currently we merge additional values into the style spec, so this is required
@@ -30,7 +39,7 @@ export default class Doc extends React.Component {
       <>
         {doc &&
           <div className="SpecDoc">
-            <div className="SpecDoc__doc">{doc}</div>
+            <div className="SpecDoc__doc" data-wd-key='spec-field-doc'>{doc}</div>
             {renderValues &&
               <ul className="SpecDoc__values">
                 {Object.entries(values).map(([key, value]) => {
@@ -61,10 +70,9 @@ export default class Doc extends React.Component {
                   return (
                     <tr key={key}>
                       <td>{key}</td>
-                      {Object.keys(headers).map(k => {
-                        const value = supportObj[k];
+                      {Object.keys(headers).map((k) => {
                         if (supportObj.hasOwnProperty(k)) {
-                          return <td key={k}>{supportObj[k]}</td>;
+                          return <td key={k}>{supportObj[k as keyof typeof headers]}</td>;
                         }
                         else {
                           return <td key={k}>no</td>;
@@ -80,4 +88,4 @@ export default class Doc extends React.Component {
       </>
     );
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/FieldArray.jsx b/src/components/FieldArray.jsx
deleted file mode 100644
index 00103fc3..00000000
--- a/src/components/FieldArray.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputArray from './InputArray'
-import Fieldset from './Fieldset'
-
-export default class FieldArray extends React.Component {
-  static propTypes = {
-    ...InputArray.propTypes,
-    name: PropTypes.string,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Fieldset label={props.label}>
-      <InputArray {...props} />
-    </Fieldset>
-  }
-}
-
diff --git a/src/components/FieldArray.tsx b/src/components/FieldArray.tsx
new file mode 100644
index 00000000..1de04ee9
--- /dev/null
+++ b/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>
+  }
+}
+
diff --git a/src/components/FieldColor.jsx b/src/components/FieldColor.jsx
deleted file mode 100644
index 2e9067be..00000000
--- a/src/components/FieldColor.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputColor from './InputColor'
-
-
-export default class FieldColor extends React.Component {
-  static propTypes = {
-    ...InputColor.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputColor {...props} />
-    </Block>
-  }
-}
-
diff --git a/src/components/FieldColor.tsx b/src/components/FieldColor.tsx
new file mode 100644
index 00000000..37d11b1a
--- /dev/null
+++ b/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>
+  }
+}
+
diff --git a/src/components/FieldDocLabel.jsx b/src/components/FieldDocLabel.tsx
similarity index 73%
rename from src/components/FieldDocLabel.jsx
rename to src/components/FieldDocLabel.tsx
index fa4096b5..fde175d7 100644
--- a/src/components/FieldDocLabel.jsx
+++ b/src/components/FieldDocLabel.tsx
@@ -1,26 +1,27 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
-export default class FieldDocLabel extends React.Component {
-  static propTypes = {
-    label: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]).isRequired,
-    fieldSpec: PropTypes.object,
-    onToggleDoc: PropTypes.func,
+type FieldDocLabelProps = {
+  label: object | string | undefined
+  fieldSpec?: {
+    doc?: string
   }
+  onToggleDoc?(...args: unknown[]): unknown
+};
 
-  constructor (props) {
+type FieldDocLabelState = {
+  open: boolean
+};
+
+export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
+  constructor (props: FieldDocLabelProps) {
     super(props);
     this.state = {
       open: false,
     }
   }
 
-  onToggleDoc = (open) => {
+  onToggleDoc = (open: boolean) => {
     this.setState({
       open,
     }, () => {
@@ -43,6 +44,7 @@ export default class FieldDocLabel extends React.Component {
             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>
diff --git a/src/components/FieldEnum.jsx b/src/components/FieldEnum.jsx
deleted file mode 100644
index f4268ece..00000000
--- a/src/components/FieldEnum.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import InputEnum from './InputEnum'
-import Block from './Block';
-import Fieldset from './Fieldset';
-
-
-export default class FieldEnum extends React.Component {
-  static propTypes = {
-    ...InputEnum.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Fieldset label={props.label}>
-      <InputEnum {...props} />
-    </Fieldset>
-  }
-}
diff --git a/src/components/FieldEnum.tsx b/src/components/FieldEnum.tsx
new file mode 100644
index 00000000..25a46689
--- /dev/null
+++ b/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>
+  }
+}
\ No newline at end of file
diff --git a/src/components/FieldId.jsx b/src/components/FieldId.tsx
similarity index 60%
rename from src/components/FieldId.jsx
rename to src/components/FieldId.tsx
index 1ce8cffc..a4dba616 100644
--- a/src/components/FieldId.jsx
+++ b/src/components/FieldId.tsx
@@ -1,18 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputString from './InputString'
 
-export default class FieldId extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    wdKey: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type FieldIdProps = {
+  value: string
+  wdKey: string
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class FieldId extends React.Component<FieldIdProps> {
   render() {
     return <Block label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}
diff --git a/src/components/FieldJson.jsx b/src/components/FieldJson.jsx
deleted file mode 100644
index 1f6cceab..00000000
--- a/src/components/FieldJson.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import InputJson from './InputJson'
-
-
-export default class FieldJson extends React.Component {
-  static propTypes = {
-    ...InputJson.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-    return <InputJson {...props} />
-  }
-}
-
diff --git a/src/components/FieldJson.tsx b/src/components/FieldJson.tsx
new file mode 100644
index 00000000..ceb4d663
--- /dev/null
+++ b/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} />
+  }
+}
+
diff --git a/src/components/FieldMaxZoom.jsx b/src/components/FieldMaxZoom.tsx
similarity index 72%
rename from src/components/FieldMaxZoom.jsx
rename to src/components/FieldMaxZoom.tsx
index e256a69f..1ebefc8c 100644
--- a/src/components/FieldMaxZoom.jsx
+++ b/src/components/FieldMaxZoom.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 
-export default class FieldMaxZoom extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type FieldMaxZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class FieldMaxZoom extends React.Component<FieldMaxZoomProps> {
   render() {
     return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
       error={this.props.error}
diff --git a/src/components/FieldMinZoom.jsx b/src/components/FieldMinZoom.tsx
similarity index 72%
rename from src/components/FieldMinZoom.jsx
rename to src/components/FieldMinZoom.tsx
index f33b5409..a3a7a759 100644
--- a/src/components/FieldMinZoom.jsx
+++ b/src/components/FieldMinZoom.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputNumber from './InputNumber'
 
-export default class FieldMinZoom extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type FieldMinZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class FieldMinZoom extends React.Component<FieldMinZoomProps> {
   render() {
     return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
       error={this.props.error}
diff --git a/src/components/FieldMultiInput.jsx b/src/components/FieldMultiInput.jsx
deleted file mode 100644
index ae5daf6b..00000000
--- a/src/components/FieldMultiInput.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputMultiInput from './InputMultiInput'
-import Fieldset from './Fieldset'
-
-
-export default class FieldMultiInput extends React.Component {
-  static propTypes = {
-    ...InputMultiInput.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Fieldset label={props.label}>
-      <InputMultiInput {...props} />
-    </Fieldset>
-  }
-}
-
diff --git a/src/components/FieldMultiInput.tsx b/src/components/FieldMultiInput.tsx
new file mode 100644
index 00000000..994480d9
--- /dev/null
+++ b/src/components/FieldMultiInput.tsx
@@ -0,0 +1,20 @@
+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() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputMultiInput {...props} />
+    </Fieldset>
+  }
+}
+
diff --git a/src/components/FieldNumber.jsx b/src/components/FieldNumber.jsx
deleted file mode 100644
index 0d42ddf8..00000000
--- a/src/components/FieldNumber.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import InputNumber from './InputNumber'
-import Block from './Block'
-
-
-export default class FieldNumber extends React.Component {
-  static propTypes = {
-    ...InputNumber.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-    return <Block label={props.label}>
-      <InputNumber {...props} />
-    </Block>
-  }
-}
-
diff --git a/src/components/FieldNumber.tsx b/src/components/FieldNumber.tsx
new file mode 100644
index 00000000..4c8ede98
--- /dev/null
+++ b/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>
+  }
+}
diff --git a/src/components/FieldSelect.jsx b/src/components/FieldSelect.jsx
deleted file mode 100644
index 1d279c6f..00000000
--- a/src/components/FieldSelect.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputSelect from './InputSelect'
-
-
-export default class FieldSelect extends React.Component {
-  static propTypes = {
-    ...InputSelect.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputSelect {...props}/>
-    </Block>
-  }
-}
-
diff --git a/src/components/FieldSelect.tsx b/src/components/FieldSelect.tsx
new file mode 100644
index 00000000..2e0a7be6
--- /dev/null
+++ b/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>
+  }
+}
+
+
diff --git a/src/components/FieldString.jsx b/src/components/FieldString.jsx
deleted file mode 100644
index 89d93274..00000000
--- a/src/components/FieldString.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputString from './InputString'
-
-export default class FieldString extends React.Component {
-  static propTypes = {
-    ...InputString.propTypes,
-    name: PropTypes.string,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputString {...props} />
-    </Block>
-  }
-}
-
diff --git a/src/components/FieldString.tsx b/src/components/FieldString.tsx
new file mode 100644
index 00000000..833d83ea
--- /dev/null
+++ b/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>
+  }
+}
diff --git a/src/components/FieldType.jsx b/src/components/FieldType.tsx
similarity index 78%
rename from src/components/FieldType.jsx
rename to src/components/FieldType.tsx
index 8d57ef42..da954907 100644
--- a/src/components/FieldType.jsx
+++ b/src/components/FieldType.tsx
@@ -1,20 +1,19 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputSelect from './InputSelect'
 import InputString from './InputString'
 
-export default class FieldType extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    wdKey: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-    disabled: PropTypes.bool,
-  }
+type FieldTypeProps = {
+  value: string
+  wdKey?: string
+  onChange(...args: unknown[]): unknown
+  error?: unknown[] | undefined
+  disabled?: boolean
+};
 
+export default class FieldType extends React.Component<FieldTypeProps> {
   static defaultProps = {
     disabled: false,
   }
diff --git a/src/components/FieldUrl.jsx b/src/components/FieldUrl.jsx
deleted file mode 100644
index 3c53b19b..00000000
--- a/src/components/FieldUrl.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, {Fragment} from 'react'
-import PropTypes from 'prop-types'
-import InputUrl from './InputUrl'
-import Block from './Block'
-
-
-export default class FieldUrl extends React.Component {
-  static propTypes = {
-    ...InputUrl.propTypes,
-  }
-
-  render () {
-    const {props} = this;
-
-    return (
-      <Block label={this.props.label}>
-        <InputUrl {...props} />
-      </Block>
-    );
-  }
-}
-
diff --git a/src/components/FieldUrl.tsx b/src/components/FieldUrl.tsx
new file mode 100644
index 00000000..2c4661fd
--- /dev/null
+++ b/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>
+    );
+  }
+}
+
diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.tsx
similarity index 72%
rename from src/components/Fieldset.jsx
rename to src/components/Fieldset.tsx
index e6308b9b..db4b4a38 100644
--- a/src/components/Fieldset.jsx
+++ b/src/components/Fieldset.tsx
@@ -1,13 +1,23 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+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 {
-  constructor (props) {
+export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
+  _labelId: string;
+
+  constructor (props: FieldsetProps) {
     super(props);
     this._labelId = `fieldset_label_${(IDX++)}`;
     this.state = {
@@ -15,15 +25,13 @@ export default class Fieldset extends React.Component {
     }
   }
 
-  onToggleDoc = (val) => {
+  onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
   }
 
   render () {
-    const {props} = this;
-
     return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
       {this.props.fieldSpec &&
         <div className="maputnik-input-block-label">
@@ -36,14 +44,14 @@ export default class Fieldset extends React.Component {
       }
       {!this.props.fieldSpec &&
         <div className="maputnik-input-block-label">
-          {props.label}
+          {this.props.label}
         </div>
       }
       <div className="maputnik-input-block-action">
         {this.props.action}
       </div>
       <div className="maputnik-input-block-content">
-        {props.children}
+        {this.props.children}
       </div>
       {this.props.fieldSpec &&
         <div
diff --git a/src/components/FilterEditorBlock.jsx b/src/components/FilterEditorBlock.tsx
similarity index 73%
rename from src/components/FilterEditorBlock.jsx
rename to src/components/FilterEditorBlock.tsx
index 7f02b6c3..021b52ab 100644
--- a/src/components/FilterEditorBlock.jsx
+++ b/src/components/FilterEditorBlock.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
-export default 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">
diff --git a/src/components/IconBackground.jsx b/src/components/IconBackground.tsx
similarity index 100%
rename from src/components/IconBackground.jsx
rename to src/components/IconBackground.tsx
diff --git a/src/components/IconCircle.jsx b/src/components/IconCircle.tsx
similarity index 100%
rename from src/components/IconCircle.jsx
rename to src/components/IconCircle.tsx
diff --git a/src/components/IconFill.jsx b/src/components/IconFill.tsx
similarity index 100%
rename from src/components/IconFill.jsx
rename to src/components/IconFill.tsx
diff --git a/src/components/IconLayer.jsx b/src/components/IconLayer.tsx
similarity index 62%
rename from src/components/IconLayer.jsx
rename to src/components/IconLayer.tsx
index 559c0293..e92160ad 100644
--- a/src/components/IconLayer.jsx
+++ b/src/components/IconLayer.tsx
@@ -1,19 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-import IconLine from './IconLine.jsx'
-import IconFill from './IconFill.jsx'
-import IconSymbol from './IconSymbol.jsx'
-import IconBackground from './IconBackground.jsx'
-import IconCircle from './IconCircle.jsx'
-import IconMissing from './IconMissing.jsx'
+import IconLine from './IconLine'
+import IconFill from './IconFill'
+import IconSymbol from './IconSymbol'
+import IconBackground from './IconBackground'
+import IconCircle from './IconCircle'
+import IconMissing from './IconMissing'
 
-export default class IconLayer extends React.Component {
-  static propTypes = {
-    type: PropTypes.string.isRequired,
-    style: PropTypes.object,
-  }
+type IconLayerProps = {
+  type: string
+  style?: object
+};
 
+export default class IconLayer extends React.Component<IconLayerProps> {
   render() {
     const iconProps = { style: this.props.style }
     switch(this.props.type) {
diff --git a/src/components/IconLine.jsx b/src/components/IconLine.tsx
similarity index 100%
rename from src/components/IconLine.jsx
rename to src/components/IconLine.tsx
diff --git a/src/components/IconMissing.jsx b/src/components/IconMissing.tsx
similarity index 100%
rename from src/components/IconMissing.jsx
rename to src/components/IconMissing.tsx
diff --git a/src/components/IconSymbol.jsx b/src/components/IconSymbol.tsx
similarity index 100%
rename from src/components/IconSymbol.jsx
rename to src/components/IconSymbol.tsx
diff --git a/src/components/InputArray.jsx b/src/components/InputArray.tsx
similarity index 67%
rename from src/components/InputArray.jsx
rename to src/components/InputArray.tsx
index 885688ff..0d2a79c3 100644
--- a/src/components/InputArray.jsx
+++ b/src/components/InputArray.tsx
@@ -1,24 +1,29 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputString from './InputString'
 import InputNumber from './InputNumber'
 
-export default class FieldArray extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    length: PropTypes.number,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-    'aria-label': PropTypes.string,
-  }
+export type FieldArrayProps = {
+  value: string[] | number[]
+  type?: string
+  length?: number
+  default?: string[] | number[]
+  onChange?(...args: unknown[]): unknown
+  'aria-label'?: string
+  label?: string
+};
 
+type FieldArrayState = {
+  value: string[] | number[]
+  initialPropsValue: unknown[]
+}
+
+export default class FieldArray extends React.Component<FieldArrayProps, FieldArrayState> {
   static defaultProps = {
     value: [],
     default: [],
   }
 
-  constructor (props) {
+  constructor (props: FieldArrayProps) {
     super(props);
     this.state = {
       value: this.props.value.slice(0),
@@ -27,8 +32,8 @@ export default class FieldArray extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
-    const value = [];
+  static getDerivedStateFromProps(props: FieldArrayProps, state: FieldArrayState) {
+    const value: any[] = [];
     const initialPropsValue = state.initialPropsValue.slice(0);
 
     Array(props.length).fill(null).map((_, i) => {
@@ -47,24 +52,24 @@ export default class FieldArray extends React.Component {
     };
   }
 
-  isComplete (value) {
+  isComplete(value: unknown[]) {
     return Array(this.props.length).fill(null).every((_, i) => {
       const val = value[i]
       return !(val === undefined || val === "");
     });
   }
 
-  changeValue(idx, newValue) {
+  changeValue(idx: number, newValue: string) {
     const value = this.state.value.slice(0);
     value[idx] = newValue;
 
     this.setState({
       value,
     }, () => {
-      if (this.isComplete(value)) {
+      if (this.isComplete(value) && this.props.onChange) {
         this.props.onChange(value);
       }
-      else {
+      else if (this.props.onChange){
         // Unset until complete
         this.props.onChange(undefined);
       }
@@ -85,8 +90,8 @@ export default class FieldArray extends React.Component {
       if(this.props.type === 'number') {
         return <InputNumber
           key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
+          default={containsValues || !this.props.default ? undefined : this.props.default[i] as number}
+          value={value[i] as number}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
           aria-label={this.props['aria-label'] || this.props.label}
@@ -94,8 +99,8 @@ export default class FieldArray extends React.Component {
       } else {
         return <InputString
           key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[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}
diff --git a/src/components/InputAutocomplete.jsx b/src/components/InputAutocomplete.tsx
similarity index 80%
rename from src/components/InputAutocomplete.jsx
rename to src/components/InputAutocomplete.tsx
index c2848f09..fabaa16f 100644
--- a/src/components/InputAutocomplete.jsx
+++ b/src/components/InputAutocomplete.tsx
@@ -1,24 +1,25 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
 
 
 const MAX_HEIGHT = 140;
 
-export default class InputAutocomplete extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    options: PropTypes.array,
-    onChange: PropTypes.func,
-    keepMenuWithinWindowBounds: PropTypes.bool,
-    'aria-label': PropTypes.string,
-  }
+export type InputAutocompleteProps = {
+  value?: string
+  options: any[]
+  onChange(...args: unknown[]): 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: [],
@@ -26,7 +27,7 @@ export default class InputAutocomplete extends React.Component {
 
   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) {
@@ -45,7 +46,7 @@ export default class InputAutocomplete extends React.Component {
     this.calcMaxHeight();
   }
 
-  onChange (v) {
+  onChange(v: string) {
     this.props.onChange(v === "" ? undefined : v);
   }
 
@@ -64,7 +65,7 @@ export default class InputAutocomplete extends React.Component {
         }}
         wrapperProps={{
           className: "maputnik-autocomplete",
-          style: null
+          style: {}
         }}
         inputProps={{
           'aria-label': this.props['aria-label'],
@@ -75,11 +76,12 @@ export default class InputAutocomplete extends React.Component {
         items={this.props.options}
         getItemValue={(item) => item[0]}
         onSelect={v => this.onChange(v)}
-        onChange={(e, 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
diff --git a/src/components/InputButton.jsx b/src/components/InputButton.tsx
similarity index 53%
rename from src/components/InputButton.jsx
rename to src/components/InputButton.tsx
index e9c4b235..bd8aaaa1 100644
--- a/src/components/InputButton.jsx
+++ b/src/components/InputButton.tsx
@@ -1,21 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
-export default class InputButton extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    "aria-label": PropTypes.string,
-    onClick: PropTypes.func,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.node,
-    disabled: PropTypes.bool,
-    type: PropTypes.string,
-    id: PropTypes.string,
-    title: PropTypes.string,
-  }
+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}
@@ -31,5 +30,4 @@ export default class InputButton extends React.Component {
       {this.props.children}
     </button>
   }
-}
-
+}
\ No newline at end of file
diff --git a/src/components/InputCheckbox.jsx b/src/components/InputCheckbox.tsx
similarity index 77%
rename from src/components/InputCheckbox.jsx
rename to src/components/InputCheckbox.tsx
index d9308965..a799e5a3 100644
--- a/src/components/InputCheckbox.jsx
+++ b/src/components/InputCheckbox.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class InputCheckbox extends React.Component {
-  static propTypes = {
-    value: PropTypes.bool,
-    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,
   }
@@ -35,5 +34,4 @@ export default class InputCheckbox extends React.Component {
       </div>
     </div>
   }
-}
-
+}
\ No newline at end of file
diff --git a/src/components/InputColor.jsx b/src/components/InputColor.tsx
similarity index 79%
rename from src/components/InputColor.jsx
rename to src/components/InputColor.tsx
index 02fb0965..ad1c6e76 100644
--- a/src/components/InputColor.jsx
+++ b/src/components/InputColor.tsx
@@ -1,36 +1,37 @@
 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})`
 }
 
-/*** Number fields with support for min, max and units and documentation*/
-export default class InputColor extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    name: PropTypes.string,
-    value: PropTypes.string,
-    doc: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    'aria-label': PropTypes.string,
-  }
+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*/
+export default class InputColor extends React.Component<InputColorProps> {
   state = {
     pickerOpened: false
   }
+  colorInput: HTMLInputElement | null = null;
 
-  constructor () {
-    super();
+  constructor (props: InputColorProps) {
+    super(props);
     this.onChangeNoCheck = lodash.throttle(this.onChangeNoCheck, 1000/30);
   }
 
-  onChangeNoCheck (v) {
+  onChangeNoCheck(v: string) {
     this.props.onChange(v);
   }
 
@@ -68,31 +69,31 @@ export default class InputColor extends React.Component {
     }
   }
 
-  onChange (v) {
+  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}
+        color={currentChromeColor}
         onChange={c => this.onChangeNoCheck(formatColor(c))}
       />
       <div
diff --git a/src/components/InputDynamicArray.jsx b/src/components/InputDynamicArray.tsx
similarity index 70%
rename from src/components/InputDynamicArray.jsx
rename to src/components/InputDynamicArray.tsx
index bf353707..aef615f7 100644
--- a/src/components/InputDynamicArray.jsx
+++ b/src/components/InputDynamicArray.tsx
@@ -1,30 +1,34 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import capitalize from 'lodash.capitalize'
+import {MdDelete} from 'react-icons/md'
+
 import InputString from './InputString'
 import InputNumber from './InputNumber'
 import InputButton from './InputButton'
-import {MdDelete} from 'react-icons/md'
 import FieldDocLabel from './FieldDocLabel'
 import InputEnum from './InputEnum'
-import capitalize from 'lodash.capitalize'
 import InputUrl from './InputUrl'
 
 
-export default class FieldDynamicArray extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-    style: PropTypes.object,
-    fieldSpec: PropTypes.object,
-    'aria-label': PropTypes.string,
+export type FieldDynamicArrayProps = {
+  value?: (string | number)[]
+  type?: 'url' | 'number' | 'enum'
+  default?: (string | number)[]
+  onChange?(...args: unknown[]): unknown
+  style?: object
+  fieldSpec?: {
+    values?: any
   }
+  'aria-label'?: string
+  label: string
+};
 
-  changeValue(idx, newValue) {
+
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+  changeValue(idx: number, newValue: string | number) {
     const values = this.values.slice(0)
     values[idx] = newValue
-    this.props.onChange(values)
+    if (this.props.onChange) this.props.onChange(values)
   }
 
   get values() {
@@ -41,20 +45,20 @@ export default class FieldDynamicArray extends React.Component {
     }
     else if (this.props.type === 'enum') {
       const {fieldSpec} = this.props;
-      const defaultValue = Object.keys(fieldSpec.values)[0];
+      const defaultValue = Object.keys(fieldSpec!.values)[0];
       values.push(defaultValue);
     } else {
       values.push("")
     }
 
-    this.props.onChange(values)
+    if (this.props.onChange) this.props.onChange(values)
   }
 
-  deleteValue(valueIdx) {
+  deleteValue(valueIdx: number) {
     const values = this.values.slice(0)
     values.splice(valueIdx, 1)
 
-    this.props.onChange(values.length > 0 ? values : undefined);
+    if (this.props.onChange) this.props.onChange(values.length > 0 ? values : undefined);
   }
 
   render() {
@@ -63,30 +67,30 @@ export default class FieldDynamicArray extends React.Component {
       let input;
       if(this.props.type === 'url') {
         input = <InputUrl
-          value={v}
+          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}
+          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)]);
+        const options = Object.keys(this.props.fieldSpec?.values).map(v => [v, capitalize(v)]);
         input = <InputEnum
           options={options}
-          value={v}
+          value={v as string}
           onChange={this.changeValue.bind(this, i)}
           aria-label={this.props['aria-label'] || this.props.label}
         />
       }
       else {
         input = <InputString
-          value={v}
+          value={v as string}
           onChange={this.changeValue.bind(this, i)}
           aria-label={this.props['aria-label'] || this.props.label}
         />
@@ -120,11 +124,11 @@ export default class FieldDynamicArray extends React.Component {
   }
 }
 
-class DeleteValueInputButton extends React.Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-  }
+type DeleteValueInputButtonProps = {
+  onClick?(...args: unknown[]): unknown
+};
 
+class DeleteValueInputButton extends React.Component<DeleteValueInputButtonProps> {
   render() {
     return <InputButton
       className="maputnik-delete-stop"
@@ -133,7 +137,7 @@ class DeleteValueInputButton extends React.Component {
     >
       <FieldDocLabel
         label={<MdDelete />}
-        doc={"Remove array item."}
+        fieldSpec={{doc:" Remove array item."}}
       />
     </InputButton>
   }
diff --git a/src/components/InputEnum.jsx b/src/components/InputEnum.tsx
similarity index 58%
rename from src/components/InputEnum.jsx
rename to src/components/InputEnum.tsx
index 138d05bd..a8f40d3f 100644
--- a/src/components/InputEnum.jsx
+++ b/src/components/InputEnum.tsx
@@ -1,10 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputSelect from './InputSelect'
 import InputMultiInput from './InputMultiInput'
 
 
-function optionsLabelLength(options) {
+function optionsLabelLength(options: any[]) {
   let sum = 0;
   options.forEach(([_, label]) => {
     sum += label.length
@@ -13,18 +12,20 @@ function optionsLabelLength(options) {
 }
 
 
-export default class InputEnum extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    options: PropTypes.array,
-    'aria-label': PropTypes.string,
-  }
+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;
 
@@ -32,14 +33,14 @@ export default class InputEnum extends React.Component {
       return <InputMultiInput
         name={name}
         options={options}
-        value={value || this.props.default}
+        value={(value || this.props.default)!}
         onChange={onChange}
         aria-label={this.props['aria-label'] || label}
       />
     } else {
       return <InputSelect
         options={options}
-        value={value || this.props.default}
+        value={(value || this.props.default)!}
         onChange={onChange}
         aria-label={this.props['aria-label'] || label}
       />
diff --git a/src/components/InputFont.jsx b/src/components/InputFont.tsx
similarity index 72%
rename from src/components/InputFont.jsx
rename to src/components/InputFont.tsx
index 53540840..7bdaf9fa 100644
--- a/src/components/InputFont.jsx
+++ b/src/components/InputFont.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputAutocomplete from './InputAutocomplete'
 
-export default class FieldFont extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    default: PropTypes.array,
-    fonts: PropTypes.array,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    'aria-label': PropTypes.string,
-  }
+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: []
   }
@@ -28,7 +28,7 @@ export default class FieldFont extends React.Component {
     }
   }
 
-  changeFont(idx, newValue) {
+  changeFont(idx: number, newValue: string) {
     const changedValues = this.values.slice(0)
     changedValues[idx] = newValue
     const filteredValues = changedValues
@@ -46,7 +46,7 @@ export default class FieldFont extends React.Component {
         <InputAutocomplete
           aria-label={this.props['aria-label'] || this.props.name}
           value={value}
-          options={this.props.fonts.map(f => [f, f])}
+          options={this.props.fonts?.map(f => [f, f])}
           onChange={this.changeFont.bind(this, i)}
         />
       </li>
diff --git a/src/components/InputJson.jsx b/src/components/InputJson.tsx
similarity index 64%
rename from src/components/InputJson.jsx
rename to src/components/InputJson.tsx
index 54bac981..cf1d3529 100644
--- a/src/components/InputJson.jsx
+++ b/src/components/InputJson.tsx
@@ -1,47 +1,45 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames';
-
-import Block from './Block'
-import FieldString from './FieldString'
-import CodeMirror from 'codemirror';
+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 jsonlint from 'jsonlint'
 import stringifyPretty from 'json-stringify-pretty-compact'
 import '../util/codemirror-mgl';
 
 
-export default class InputJson extends React.Component {
-  static propTypes = {
-    layer: PropTypes.any.isRequired,
-    maxHeight: PropTypes.number,
-    onChange: PropTypes.func,
-    lineNumbers: PropTypes.bool,
-    lineWrapping: PropTypes.bool,
-    getValue: PropTypes.func,
-    gutters: PropTypes.array,
-    className: PropTypes.string,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onJSONValid: PropTypes.func,
-    onJSONInvalid: PropTypes.func,
-    mode: PropTypes.object,
-    lint: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.object,
-    ]),
-  }
+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) => {
+    getValue: (data: any) => {
       return stringifyPretty(data, {indent: 2, maxLength: 40});
     },
     onFocus: () => {},
@@ -49,8 +47,12 @@ export default class InputJson extends React.Component {
     onJSONInvalid: () => {},
     onJSONValid: () => {},
   }
+  _keyEvent: string;
+  _doc: CodeMirror.Editor | undefined;
+  _el: HTMLDivElement | null = null;
+  _cancelNextChange: boolean = false;
 
-  constructor(props) {
+  constructor(props: InputJsonProps) {
     super(props);
     this._keyEvent = "keyboard";
     this.state = {
@@ -61,7 +63,7 @@ export default class InputJson extends React.Component {
   }
 
   componentDidMount () {
-    this._doc = CodeMirror(this._el, {
+    this._doc = CodeMirror(this._el!, {
       value: this.props.getValue(this.props.layer),
       mode: this.props.mode || {
         name: "mgl",
@@ -84,12 +86,12 @@ export default class InputJson extends React.Component {
     this._doc.on('blur', this.onBlur);
   }
 
-  onPointerDown = (cm, e) => {
+  onPointerDown = () => {
     this._keyEvent = "pointer";
   }
 
-  onFocus = (cm, e) => {
-    this.props.onFocus();
+  onFocus = () => {
+    if (this.props.onFocus) this.props.onFocus();
     this.setState({
       isEditing: true,
       showMessage: (this._keyEvent === "keyboard"),
@@ -98,7 +100,7 @@ export default class InputJson extends React.Component {
 
   onBlur = () => {
     this._keyEvent = "keyboard";
-    this.props.onBlur();
+    if (this.props.onBlur) this.props.onBlur();
     this.setState({
       isEditing: false,
       showMessage: false,
@@ -106,29 +108,29 @@ export default class InputJson extends React.Component {
   }
 
   componentWillUnMount () {
-    this._doc.off('change', this.onChange);
-    this._doc.off('focus', this.onFocus);
-    this._doc.off('blur', this.onBlur);
+    this._doc!.off('change', this.onChange);
+    this._doc!.off('focus', this.onFocus);
+    this._doc!.off('blur', this.onBlur);
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: InputJsonProps) {
     if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
       this._cancelNextChange = true;
-      this._doc.setValue(
+      this._doc!.setValue(
         this.props.getValue(this.props.layer),
       )
     }
   }
 
-  onChange = (e) => {
+  onChange = (_e: unknown) => {
     if (this._cancelNextChange) {
       this._cancelNextChange = false;
       this.setState({
-        prevValue: this._doc.getValue(),
+        prevValue: this._doc!.getValue(),
       })
       return;
     }
-    const newCode = this._doc.getValue();
+    const newCode = this._doc!.getValue();
 
     if (this.state.prevValue !== newCode) {
       let parsedLayer, err;
@@ -139,12 +141,12 @@ export default class InputJson extends React.Component {
         console.warn(_err)
       }
 
-      if (err) {
+      if (err && this.props.onJSONInvalid) {
         this.props.onJSONInvalid();
       }
       else {
-        this.props.onChange(parsedLayer)
-        this.props.onJSONValid();
+        if (this.props.onChange) this.props.onChange(parsedLayer)
+        if (this.props.onJSONValid) this.props.onJSONValid();
       }
     }
 
@@ -155,7 +157,7 @@ export default class InputJson extends React.Component {
 
   render() {
     const {showMessage} = this.state;
-    const style = {};
+    const style = {} as {maxHeight?: number};
     if (this.props.maxHeight) {
       style.maxHeight = this.props.maxHeight;
     }
diff --git a/src/components/InputMultiInput.jsx b/src/components/InputMultiInput.tsx
similarity index 67%
rename from src/components/InputMultiInput.jsx
rename to src/components/InputMultiInput.tsx
index a9d2aad1..64529c48 100644
--- a/src/components/InputMultiInput.jsx
+++ b/src/components/InputMultiInput.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import InputButton from './InputButton'
 
-export default class InputMultiInput extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    options: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
+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])) {
@@ -25,7 +24,7 @@ export default class InputMultiInput extends React.Component {
       >
         <input type="radio"
           name={this.props.name}
-          onChange={e => this.props.onChange(val)}
+          onChange={_e => this.props.onChange(val)}
           value={val}
           checked={val === selectedValue}
         />
diff --git a/src/components/InputNumber.jsx b/src/components/InputNumber.tsx
similarity index 74%
rename from src/components/InputNumber.jsx
rename to src/components/InputNumber.tsx
index f2562881..eb7d6e18 100644
--- a/src/components/InputNumber.jsx
+++ b/src/components/InputNumber.tsx
@@ -1,27 +1,35 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { BaseSyntheticEvent } from 'react'
 
 let IDX = 0;
 
-export default class InputNumber extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    default: PropTypes.number,
-    min: PropTypes.number,
-    max: PropTypes.number,
-    onChange: PropTypes.func,
-    allowRange: PropTypes.bool,
-    rangeStep: PropTypes.number,
-    wdKey: PropTypes.string,
-    required: PropTypes.bool,
-    "aria-label": PropTypes.string,
-  }
+export type InputNumberProps = {
+  value?: number
+  default?: number
+  min?: number
+  max?: number
+  onChange?(...args: unknown[]): 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) {
+  constructor(props: InputNumberProps) {
     super(props)
     this.state = {
       uuid: IDX++,
@@ -31,7 +39,7 @@ export default class InputNumber extends React.Component {
     }
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props: InputNumberProps, state: InputNumberState) {
     if (!state.editing && props.value !== state.value) {
       return {
         value: props.value,
@@ -41,16 +49,15 @@ export default class InputNumber extends React.Component {
     return null;
   }
 
-  changeValue(newValue) {
+  changeValue(newValue: number | string | undefined) {
     const value = (newValue === "" || newValue === undefined) ?
-      undefined :
-      parseFloat(newValue);
+      undefined : +newValue;
 
     const hasChanged = this.props.value !== value;
     if(this.isValid(value) && hasChanged) {
-      this.props.onChange(value)
+      if (this.props.onChange) this.props.onChange(value)
       this.setState({
-        value: newValue,
+        value: value,
       });
     }
     else if (!this.isValid(value) && hasChanged) {
@@ -60,25 +67,25 @@ export default class InputNumber extends React.Component {
     }
 
     this.setState({
-      dirtyValue: newValue === "" ? undefined : newValue,
+      dirtyValue: newValue === "" ? undefined : value,
     })
   }
 
-  isValid(v) {
+  isValid(v: number | string | undefined) {
     if (v === undefined) {
       return true;
     }
 
-    const value = parseFloat(v)
+    const value = +v;
     if(isNaN(value)) {
       return false
     }
 
-    if(!isNaN(this.props.min) && value < this.props.min) {
+    if(!isNaN(this.props.min!) && value < this.props.min!) {
       return false
     }
 
-    if(!isNaN(this.props.max) && value > this.props.max) {
+    if(!isNaN(this.props.max!) && value > this.props.max!) {
       return false
     }
 
@@ -88,7 +95,7 @@ export default class InputNumber extends React.Component {
   resetValue = () => {
     this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
-    if(this.state.value === "") {
+    if(!this.state.value) {
       return;
     }
 
@@ -104,8 +111,8 @@ export default class InputNumber extends React.Component {
     }
   }
 
-  onChangeRange = (e) => {
-    let value = parseFloat(e.target.value, 10);
+  onChangeRange = (e: BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
+    let value = parseFloat(e.target.value);
     const step = this.props.rangeStep;
     let dirtyValue = value;
 
@@ -119,11 +126,11 @@ export default class InputNumber extends React.Component {
         // 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;
+        if (value < this.state.dirtyValue!) {
+          value = this.state.value! - step;
         }
         else {
-          value = this.state.value + step
+          value = this.state.value! + step
         }
         dirtyValue = value;
       }
@@ -140,10 +147,10 @@ export default class InputNumber extends React.Component {
     this._keyboardEvent = false;
 
     // Clamp between min/max
-    value = Math.max(this.props.min, Math.min(this.props.max, value));
+    value = Math.max(this.props.min!, Math.min(this.props.max!, value));
 
     this.setState({value, dirtyValue});
-    this.props.onChange(value);
+    if (this.props.onChange) this.props.onChange(value);
   }
 
   render() {
@@ -196,15 +203,15 @@ export default class InputNumber extends React.Component {
           type="text"
           spellCheck="false"
           className="maputnik-number"
-          placeholder={this.props.default}
+          placeholder={this.props.default?.toString()}
           value={inputValue === undefined ? "" : inputValue}
-          onFocus={e => {
+          onFocus={_e => {
             this.setState({editing: true});
           }}
           onChange={e => {
             this.changeValue(e.target.value);
           }}
-          onBlur={e => {
+          onBlur={_e => {
             this.setState({editing: false});
             this.resetValue()
           }}
@@ -218,7 +225,7 @@ export default class InputNumber extends React.Component {
         aria-label={this.props['aria-label']}
         spellCheck="false"
         className="maputnik-number"
-        placeholder={this.props.default}
+        placeholder={this.props.default?.toString()}
         value={value === undefined ? "" : value}
         onChange={e => this.changeValue(e.target.value)}
         onFocus={() => {
diff --git a/src/components/InputSelect.jsx b/src/components/InputSelect.tsx
similarity index 53%
rename from src/components/InputSelect.jsx
rename to src/components/InputSelect.tsx
index a138736f..9a8f9485 100644
--- a/src/components/InputSelect.jsx
+++ b/src/components/InputSelect.tsx
@@ -1,22 +1,20 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class InputSelect extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    "data-wd-key": PropTypes.string,
-    options: PropTypes.array.isRequired,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-    title: PropTypes.string,
-    'aria-label': PropTypes.string,
-  }
 
+export type InputSelectProps = {
+  value: string
+  "data-wd-key"?: string
+  options: [string, any][] | string[]
+  style?: object
+  onChange(...args: unknown[]): unknown
+  title?: string
+  'aria-label'?: string
+};
 
+export default class InputSelect extends React.Component<InputSelectProps> {
   render() {
-    let options = this.props.options
+    let options = this.props.options;
     if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map(v => [v, v])
+      options = options.map((v) => [v, v]) as [string, any][];
     }
 
     return <select
diff --git a/src/components/InputSpec.jsx b/src/components/InputSpec.jsx
deleted file mode 100644
index 021a9787..00000000
--- a/src/components/InputSpec.jsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import InputColor from './InputColor'
-import InputNumber from './InputNumber'
-import InputCheckbox from './InputCheckbox'
-import InputString from './InputString'
-import InputSelect from './InputSelect'
-import InputMultiInput from './InputMultiInput'
-import InputArray from './InputArray'
-import InputDynamicArray from './InputDynamicArray'
-import InputFont from './InputFont'
-import InputAutocomplete from './InputAutocomplete'
-import InputEnum from './InputEnum'
-import capitalize from 'lodash.capitalize'
-
-const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
-
-function labelFromFieldName(fieldName) {
-  let label = fieldName.split('-').slice(1).join(' ')
-  if(label.length > 0) {
-    label = label.charAt(0).toUpperCase() + label.slice(1);
-  }
-  return label
-}
-
-function optionsLabelLength(options) {
-  let sum = 0;
-  options.forEach(([_, label]) => {
-    sum += label.length
-  })
-  return sum
-}
-
-/** Display any field from the Maplibre GL style spec and
- * choose the correct field component based on the @{fieldSpec}
- * to display @{value}. */
-export default class SpecField extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    fieldName: PropTypes.string.isRequired,
-    fieldSpec: PropTypes.object.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.array,
-      PropTypes.bool
-    ]),
-    /** Override the style of the field */
-    style: PropTypes.object,
-    'aria-label': PropTypes.string,
-  }
-
-  render() {
-    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 => this.props.onChange(this.props.fieldName, newValue),
-      'aria-label': this.props['aria-label'],
-    }
-
-    function childNodes() {
-      switch(this.props.fieldSpec.type) {
-        case 'number': return (
-          <InputNumber
-            {...commonProps}
-            min={this.props.fieldSpec.minimum}
-            max={this.props.fieldSpec.maximum}
-          />
-        )
-        case 'enum':
-          const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
-
-          return <InputEnum
-            {...commonProps}
-            options={options}
-          />
-        case 'resolvedImage':
-        case 'formatted':
-        case 'string':
-          if (iconProperties.indexOf(this.props.fieldName) >= 0) {
-            const options = this.props.fieldSpec.values || [];
-            return <InputAutocomplete
-              {...commonProps}
-              options={options.map(f => [f, f])}
-            />
-          } else {
-            return <InputString
-              {...commonProps}
-            />
-          }
-        case 'color': return (
-          <InputColor
-            {...commonProps}
-          />
-        )
-        case 'boolean': return (
-          <InputCheckbox
-            {...commonProps}
-          />
-        )
-        case 'array':
-          if(this.props.fieldName === 'text-font') {
-            return <InputFont
-              {...commonProps}
-              fonts={this.props.fieldSpec.values}
-            />
-          } else {
-            if (this.props.fieldSpec.length) {
-              return <InputArray
-                {...commonProps}
-                type={this.props.fieldSpec.value}
-                length={this.props.fieldSpec.length}
-              />
-            } else {
-              return <InputDynamicArray
-                {...commonProps}
-                fieldSpec={this.props.fieldSpec}
-                type={this.props.fieldSpec.value}
-              />
-            }
-          }
-        default: return null
-      }
-    }
-
-    return (
-      <div data-wd-key={"spec-field:"+this.props.fieldName}>
-        {childNodes.call(this)}
-      </div>
-    );
-  }
-}
diff --git a/src/components/InputSpec.tsx b/src/components/InputSpec.tsx
new file mode 100644
index 00000000..f79bb4da
--- /dev/null
+++ b/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(...args: unknown[]): 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: string) => 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>
+    );
+  }
+}
diff --git a/src/components/InputString.jsx b/src/components/InputString.tsx
similarity index 62%
rename from src/components/InputString.jsx
rename to src/components/InputString.tsx
index 3efd93d1..ee1d0bc6 100644
--- a/src/components/InputString.jsx
+++ b/src/components/InputString.tsx
@@ -1,26 +1,30 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-export default class InputString extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    onInput: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-    disabled: PropTypes.bool,
-    spellCheck: PropTypes.bool,
-    'aria-label': PropTypes.string,
-  }
+export type InputStringProps = {
+  "data-wd-key"?: string
+  value?: string
+  style?: object
+  default?: string
+  onChange?(...args: unknown[]): unknown
+  onInput?(...args: unknown[]): unknown
+  multi?: boolean
+  required?: boolean
+  disabled?: boolean
+  spellCheck?: boolean
+  'aria-label'?: string
+};
 
+type InputStringState = {
+  editing: boolean
+  value?: string
+}
+
+export default class InputString extends React.Component<InputStringProps, InputStringState> {
   static defaultProps = {
     onInput: () => {},
   }
 
-  constructor(props) {
+  constructor(props: InputStringProps) {
     super(props)
     this.state = {
       editing: false,
@@ -28,7 +32,7 @@ export default class InputString extends React.Component {
     }
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props: InputStringProps, state: InputStringState) {
     if (!state.editing) {
       return {
         value: props.value
@@ -68,22 +72,22 @@ export default class InputString extends React.Component {
       style: this.props.style,
       value: this.state.value === undefined ? "" : this.state.value,
       placeholder: this.props.default,
-      onChange: e => {
+      onChange: (e: React.BaseSyntheticEvent<Event, HTMLInputElement, HTMLInputElement>) => {
         this.setState({
           editing: true,
           value: e.target.value
         }, () => {
-          this.props.onInput(this.state.value);
+          if (this.props.onInput) this.props.onInput(this.state.value);
         });
       },
       onBlur: () => {
         if(this.state.value!==this.props.value) {
           this.setState({editing: false});
-          this.props.onChange(this.state.value);
+          if (this.props.onChange) this.props.onChange(this.state.value);
         }
       },
       onKeyDown: (e) => {
-        if (e.keyCode === 13) {
+        if (e.keyCode === 13 && this.props.onChange) {
           this.props.onChange(this.state.value);
         }
       },
diff --git a/src/components/InputUrl.jsx b/src/components/InputUrl.tsx
similarity index 68%
rename from src/components/InputUrl.jsx
rename to src/components/InputUrl.tsx
index dd62caa7..e8a9196f 100644
--- a/src/components/InputUrl.jsx
+++ b/src/components/InputUrl.tsx
@@ -1,16 +1,15 @@
-import React, {Fragment} from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import InputString from './InputString'
 import SmallError from './SmallError'
 
 
-function validate (url) {
+function validate(url: string) {
   if (url === "") {
     return;
   }
 
   let error;
-  const getProtocol = (url) => {
+  const getProtocol = (url: string) => {
     try {
       const urlObj = new URL(url);
       return urlObj.protocol;
@@ -48,38 +47,44 @@ function validate (url) {
   return error;
 }
 
-export default class FieldUrl extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    onChange: PropTypes.func,
-    onInput: PropTypes.func,
-    multi: PropTypes.bool,
-    required: PropTypes.bool,
-    'aria-label': PropTypes.string,
-  }
+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) {
+  constructor (props: FieldUrlProps) {
     super(props);
     this.state = {
       error: validate(props.value)
     };
   }
 
-  onInput = (url) => {
+  onInput = (url: string) => {
     this.setState({
       error: validate(url)
     });
-    this.props.onInput(url);
+    if (this.props.onInput) this.props.onInput(url);
   }
 
-  onChange = (url) => {
+  onChange = (url: string) => {
     this.setState({
       error: validate(url)
     });
diff --git a/src/components/Modal.jsx b/src/components/Modal.tsx
similarity index 77%
rename from src/components/Modal.jsx
rename to src/components/Modal.tsx
index c62de0ef..1b0c1dd4 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.tsx
@@ -1,22 +1,21 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {MdClose} from 'react-icons/md'
 import AriaModal from 'react-aria-modal'
 import classnames from 'classnames';
 
 
-export default class Modal extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    isOpen: PropTypes.bool.isRequired,
-    title: PropTypes.string.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-    children: PropTypes.node,
-    underlayClickExits: PropTypes.bool,
-    underlayProps: PropTypes.object,
-    className: PropTypes.string,
-  }
+type ModalProps = {
+  "data-wd-key"?: string
+  isOpen: boolean
+  title: string
+  onOpenToggle(...args: unknown[]): unknown
+  underlayClickExits?: boolean
+  underlayProps?: any
+  className?: string
+};
 
+
+export default class Modal extends React.Component<ModalProps> {
   static defaultProps = {
     underlayClickExits: true
   }
@@ -24,7 +23,7 @@ export default class Modal extends React.Component {
   // See <https://github.com/maputnik/editor/issues/416>
   onClose = () => {
     if (document.activeElement) {
-      document.activeElement.blur();
+      (document.activeElement as HTMLElement).blur();
     }
 
     setTimeout(() => {
@@ -37,6 +36,7 @@ export default class Modal extends React.Component {
       return <AriaModal
         titleText={this.props.title}
         underlayClickExits={this.props.underlayClickExits}
+        // @ts-ignore
         underlayProps={this.props.underlayProps}
         data-wd-key={this.props["data-wd-key"]}
         verticallyCenter={true}
diff --git a/src/components/ModalLoading.jsx b/src/components/ModalLoading.tsx
similarity index 64%
rename from src/components/ModalLoading.jsx
rename to src/components/ModalLoading.tsx
index 07303c3c..f6f132e7 100644
--- a/src/components/ModalLoading.jsx
+++ b/src/components/ModalLoading.tsx
@@ -1,19 +1,19 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import InputButton from './InputButton'
 import Modal from './Modal'
 
 
-export default class ModalLoading extends React.Component {
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onCancel: PropTypes.func.isRequired,
-    title: PropTypes.string.isRequired,
-    message: PropTypes.node.isRequired,
-  }
+type ModalLoadingProps = {
+  isOpen: boolean
+  onCancel(...args: unknown[]): unknown
+  title: string
+  message: React.ReactNode
+};
 
-  underlayOnClick(e) {
+
+export default class ModalLoading extends React.Component<ModalLoadingProps> {
+  underlayOnClick(e: Event) {
     // This stops click events falling through to underlying modals.
     e.stopPropagation();
   }
@@ -24,9 +24,9 @@ export default class ModalLoading extends React.Component {
       isOpen={this.props.isOpen}
       underlayClickExits={false}
       underlayProps={{
-        onClick: (e) => underlayProps(e)
+        // @ts-ignore
+        onClick: (e: Event) => underlayProps(e)
       }}
-      closeable={false}
       title={this.props.title}
       onOpenToggle={() => this.props.onCancel()}
     >
diff --git a/src/components/ModalOpen.jsx b/src/components/ModalOpen.tsx
similarity index 82%
rename from src/components/ModalOpen.jsx
rename to src/components/ModalOpen.tsx
index 6b542941..da7aaeeb 100644
--- a/src/components/ModalOpen.jsx
+++ b/src/components/ModalOpen.tsx
@@ -1,25 +1,24 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React, { FormEvent } from 'react'
+import {MdFileUpload} from 'react-icons/md'
+import {MdAddCircleOutline} from 'react-icons/md'
+import FileReaderInput, { Result } from 'react-file-reader-input'
+
 import ModalLoading from './ModalLoading'
 import Modal from './Modal'
 import InputButton from './InputButton'
-import FileReaderInput from 'react-file-reader-input'
 import InputUrl from './InputUrl'
 
-import {MdFileUpload} from 'react-icons/md'
-import {MdAddCircleOutline} from 'react-icons/md'
-
 import style from '../libs/style'
 import publicStyles from '../config/styles.json'
 
-class PublicStyle extends React.Component {
-  static propTypes = {
-    url: PropTypes.string.isRequired,
-    thumbnailUrl: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-    onSelect: PropTypes.func.isRequired,
-  }
+type PublicStyleProps = {
+  url: string
+  thumbnailUrl: string
+  title: string
+  onSelect(...args: unknown[]): unknown
+};
 
+class PublicStyle extends React.Component<PublicStyleProps> {
   render() {
     return <div className="maputnik-public-style">
       <InputButton
@@ -43,14 +42,21 @@ class PublicStyle extends React.Component {
   }
 }
 
-export default class ModalOpen extends React.Component {
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-    onStyleOpen: PropTypes.func.isRequired,
-  }
+type ModalOpenProps = {
+  isOpen: boolean
+  onOpenToggle(...args: unknown[]): unknown
+  onStyleOpen(...args: unknown[]): unknown
+};
 
-  constructor(props) {
+type ModalOpenState = {
+  styleUrl: string
+  error?: string | null
+  activeRequest?: any
+  activeRequestUrl?: string | null
+};
+
+export default class ModalOpen extends React.Component<ModalOpenProps, ModalOpenState> {
+  constructor(props: ModalOpenProps) {
     super(props);
     this.state = {
       styleUrl: ""
@@ -63,7 +69,7 @@ export default class ModalOpen extends React.Component {
     })
   }
 
-  onCancelActiveRequest(e) {
+  onCancelActiveRequest(e: Event) {
     // Else the click propagates to the underlying modal
     if(e) e.stopPropagation();
 
@@ -76,12 +82,12 @@ export default class ModalOpen extends React.Component {
     }
   }
 
-  onStyleSelect = (styleUrl) => {
+  onStyleSelect = (styleUrl: string) => {
     this.clearError();
 
-    let canceled;
+    let canceled: boolean = false;
 
-    const activeRequest = fetch(styleUrl, {
+    fetch(styleUrl, {
       mode: 'cors',
       credentials: "same-origin"
     })
@@ -123,13 +129,13 @@ export default class ModalOpen extends React.Component {
     })
   }
 
-  onSubmitUrl = (e) => {
+  onSubmitUrl = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     this.onStyleSelect(this.state.styleUrl);
   }
 
-  onUpload = (_, files) => {
-    const [e, file] = files[0];
+  onUpload = (_: any, files: Result[]) => {
+    const [_e, file] = files[0];
     const reader = new FileReader();
 
     this.clearError();
@@ -138,11 +144,11 @@ export default class ModalOpen extends React.Component {
     reader.onload = e => {
       let mapStyle;
       try {
-        mapStyle = JSON.parse(e.target.result)
+        mapStyle = JSON.parse(e.target?.result as string)
       }
       catch(err) {
         this.setState({
-          error: err.toString()
+          error: (err as Error).toString()
         });
         return;
       }
@@ -161,7 +167,7 @@ export default class ModalOpen extends React.Component {
     this.props.onOpenToggle();
   }
 
-  onChangeUrl = (url) => {
+  onChangeUrl = (url: string) => {
     this.setState({
       styleUrl: url,
     });
@@ -200,7 +206,7 @@ export default class ModalOpen extends React.Component {
           <section className="maputnik-modal-section">
             <h1>Upload Style</h1>
             <p>Upload a JSON style from your computer.</p>
-            <FileReaderInput onChange={this.onUpload} tabIndex="-1" aria-label="Style file">
+            <FileReaderInput onChange={this.onUpload} tabIndex={-1} aria-label="Style file">
               <InputButton className="maputnik-upload-button"><MdFileUpload /> Upload</InputButton>
             </FileReaderInput>
           </section>
@@ -246,7 +252,7 @@ export default class ModalOpen extends React.Component {
         <ModalLoading
           isOpen={!!this.state.activeRequest}
           title={'Loading style'}
-          onCancel={(e) => this.onCancelActiveRequest(e)}
+          onCancel={(e: Event) => this.onCancelActiveRequest(e)}
           message={"Loading: "+this.state.activeRequestUrl}
         />
       </div>
diff --git a/src/components/ModalSettings.jsx b/src/components/ModalSettings.tsx
similarity index 85%
rename from src/components/ModalSettings.jsx
rename to src/components/ModalSettings.tsx
index 973a6886..14afc108 100644
--- a/src/components/ModalSettings.jsx
+++ b/src/components/ModalSettings.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import {LightSpecification, StyleSpecification, TransitionSpecification, latest} from '@maplibre/maplibre-gl-style-spec'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
-import Block from './Block'
 import FieldArray from './FieldArray'
 import FieldNumber from './FieldNumber'
 import FieldString from './FieldString'
@@ -13,16 +11,16 @@ import FieldColor from './FieldColor'
 import Modal from './Modal'
 import fieldSpecAdditional from '../libs/field-spec-additional'
 
-export default class ModalSettings extends React.Component {
-  static propTypes = {
-    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: PropTypes.func.isRequired,
-    onChangeMetadataProperty: PropTypes.func.isRequired,
-    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-  }
+type ModalSettingsProps = {
+  mapStyle: StyleSpecification
+  onStyleChanged(...args: unknown[]): unknown
+  onChangeMetadataProperty(...args: unknown[]): unknown
+  isOpen: boolean
+  onOpenToggle(...args: unknown[]): unknown
+};
 
-  changeTransitionProperty(property, value) {
+export default class ModalSettings extends React.Component<ModalSettingsProps> {
+  changeTransitionProperty(property: keyof TransitionSpecification, value: number | undefined) {
     const transition = {
       ...this.props.mapStyle.transition,
     }
@@ -40,7 +38,7 @@ export default class ModalSettings extends React.Component {
     });
   }
 
-  changeLightProperty(property, value) {
+  changeLightProperty(property: keyof LightSpecification, value: any) {
     const light = {
       ...this.props.mapStyle.light,
     }
@@ -49,6 +47,7 @@ export default class ModalSettings extends React.Component {
       delete light[property];
     }
     else {
+      // @ts-ignore
       light[property] = value;
     }
 
@@ -58,22 +57,24 @@ export default class ModalSettings extends React.Component {
     });
   }
 
-  changeStyleProperty(property, value) {
+  changeStyleProperty(property: keyof StyleSpecification | "owner", value: any) {
     const changedStyle = {
       ...this.props.mapStyle,
     };
 
     if (value === undefined) {
+      // @ts-ignore
       delete changedStyle[property];
     }
     else {
+      // @ts-ignore
       changedStyle[property] = value;
     }
     this.props.onStyleChanged(changedStyle);
   }
 
   render() {
-    const metadata = this.props.mapStyle.metadata || {}
+    const metadata = this.props.mapStyle.metadata || {} as any;
     const {onChangeMetadataProperty, mapStyle} = this.props;
     const inputProps = { }
 
@@ -98,14 +99,14 @@ export default class ModalSettings extends React.Component {
           label={"Owner"}
           fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}
           data-wd-key="modal:settings.owner"
-          value={this.props.mapStyle.owner}
+          value={(this.props.mapStyle as any).owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
         <FieldUrl {...inputProps}
           fieldSpec={latest.$root.sprite}
           label="Sprite URL"
           data-wd-key="modal:settings.sprite"
-          value={this.props.mapStyle.sprite}
+          value={this.props.mapStyle.sprite as string}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
 
@@ -113,7 +114,7 @@ export default class ModalSettings extends React.Component {
           label="Glyphs URL"
           fieldSpec={latest.$root.glyphs}
           data-wd-key="modal:settings.glyphs"
-          value={this.props.mapStyle.glyphs}
+          value={this.props.mapStyle.glyphs as string}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
 
@@ -138,7 +139,7 @@ export default class ModalSettings extends React.Component {
           fieldSpec={latest.$root.center}
           length={2}
           type="number"
-          value={mapStyle.center}
+          value={mapStyle.center || []}
           default={latest.$root.center.default || [0, 0]}
           onChange={this.changeStyleProperty.bind(this, "center")}
         />
@@ -175,7 +176,7 @@ export default class ModalSettings extends React.Component {
           label={"Light anchor"}
           fieldSpec={latest.light.anchor}
           name="light-anchor"
-          value={light.anchor}
+          value={light.anchor as string}
           options={Object.keys(latest.light.anchor.values)}
           default={latest.light.anchor.default}
           onChange={this.changeLightProperty.bind(this, "anchor")}
@@ -185,7 +186,7 @@ export default class ModalSettings extends React.Component {
           {...inputProps}
           label={"Light color"}
           fieldSpec={latest.light.color}
-          value={light.color}
+          value={light.color as string}
           default={latest.light.color.default}
           onChange={this.changeLightProperty.bind(this, "color")}
         />
@@ -194,7 +195,7 @@ export default class ModalSettings extends React.Component {
           {...inputProps}
           label={"Light intensity"}
           fieldSpec={latest.light.intensity}
-          value={light.intensity}
+          value={light.intensity as number}
           default={latest.light.intensity.default}
           onChange={this.changeLightProperty.bind(this, "intensity")}
         />
@@ -205,7 +206,7 @@ export default class ModalSettings extends React.Component {
           fieldSpec={latest.light.position}
           type="number"
           length={latest.light.position.length}
-          value={light.position}
+          value={light.position as number[]}
           default={latest.light.position.default}
           onChange={this.changeLightProperty.bind(this, "position")}
         />
diff --git a/src/components/ModalShortcuts.jsx b/src/components/ModalShortcuts.tsx
similarity index 93%
rename from src/components/ModalShortcuts.jsx
rename to src/components/ModalShortcuts.tsx
index ebe8a0e9..dc7e14b4 100644
--- a/src/components/ModalShortcuts.jsx
+++ b/src/components/ModalShortcuts.tsx
@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Modal from './Modal'
 
 
-export default class ModalShortcuts extends React.Component {
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-  }
+type ModalShortcutsProps = {
+  isOpen: boolean
+  onOpenToggle(...args: unknown[]): unknown
+};
 
+
+export default class ModalShortcuts extends React.Component<ModalShortcutsProps> {
   render() {
     const help = [
       {
diff --git a/src/components/ModalSurvey.jsx b/src/components/ModalSurvey.tsx
similarity index 85%
rename from src/components/ModalSurvey.jsx
rename to src/components/ModalSurvey.tsx
index 13ab9395..59c1d1f7 100644
--- a/src/components/ModalSurvey.jsx
+++ b/src/components/ModalSurvey.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import InputButton from './InputButton'
 import Modal from './Modal'
 
+// @ts-ignore
 import logoImage from 'maputnik-design/logos/logo-color.svg'
 
-export default class ModalSurvey extends React.Component {
-  static propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: PropTypes.func.isRequired,
-  }
+type ModalSurveyProps = {
+  isOpen: boolean
+  onOpenToggle(...args: unknown[]): unknown
+};
 
+export default class ModalSurvey extends React.Component<ModalSurveyProps> {
   onClick = () => {
     window.open('https://gregorywolanski.typeform.com/to/cPgaSY', '_blank');
 
diff --git a/src/components/ScrollContainer.jsx b/src/components/ScrollContainer.jsx
deleted file mode 100644
index f66bbd72..00000000
--- a/src/components/ScrollContainer.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-export default class ScrollContainer extends React.Component {
-  static propTypes = {
-    children: PropTypes.node
-  }
-
-  render() {
-    return <div className="maputnik-scroll-container">
-      {this.props.children}
-    </div>
-  }
-}
-
diff --git a/src/components/ScrollContainer.tsx b/src/components/ScrollContainer.tsx
new file mode 100644
index 00000000..cbff77a9
--- /dev/null
+++ b/src/components/ScrollContainer.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+type ScrollContainerProps = {
+  children?: React.ReactNode
+};
+
+export default class ScrollContainer extends React.Component<ScrollContainerProps> {
+  render() {
+    return <div className="maputnik-scroll-container">
+      {this.props.children}
+    </div>
+  }
+}
+
diff --git a/src/components/SingleFilterEditor.jsx b/src/components/SingleFilterEditor.tsx
similarity index 61%
rename from src/components/SingleFilterEditor.jsx
rename to src/components/SingleFilterEditor.tsx
index 752a2d5d..63661a60 100644
--- a/src/components/SingleFilterEditor.jsx
+++ b/src/components/SingleFilterEditor.tsx
@@ -1,18 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {otherFilterOps} from '../libs/filterops'
 import InputString from './InputString'
 import InputAutocomplete from './InputAutocomplete'
 import InputSelect from './InputSelect'
 
-function tryParseInt(v) {
+function tryParseInt(v: string | number) {
   if (v === '') return v
-  if (isNaN(v)) return v
-  return parseFloat(v)
+  if (isNaN(v as number)) return v
+  return parseFloat(v as string)
 }
 
-function tryParseBool(v) {
+function tryParseBool(v: string | boolean) {
   const isString = (typeof(v) === "string");
   if(!isString) {
     return v;
@@ -29,24 +28,24 @@ function tryParseBool(v) {
   }
 }
 
-function parseFilter(v) {
-  v = tryParseInt(v);
-  v = tryParseBool(v);
+function parseFilter(v: string | boolean | number) {
+  v = tryParseInt(v as any);
+  v = tryParseBool(v as any);
   return v;
 }
 
-export default class SingleFilterEditor extends React.Component {
-  static propTypes = {
-    filter: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-    properties: PropTypes.object,
-  }
+type SingleFilterEditorProps = {
+  filter: any[]
+  onChange(...args: unknown[]): unknown
+  properties?: {[key: string]: string}
+};
 
+export default class SingleFilterEditor extends React.Component<SingleFilterEditorProps> {
   static defaultProps = {
     properties: {},
   }
 
-  onFilterPartChanged(filterOp, propertyName, filterArgs) {
+  onFilterPartChanged(filterOp: string, propertyName: string, filterArgs: string[]) {
     let newFilter = [filterOp, propertyName, ...filterArgs.map(parseFilter)]
     if(filterOp === 'has' || filterOp === '!has') {
       newFilter = [filterOp, propertyName]
@@ -67,15 +66,15 @@ export default class SingleFilterEditor extends React.Component {
         <InputAutocomplete
           aria-label="key"
           value={propertyName}
-          options={Object.keys(this.props.properties).map(propName => [propName, propName])}
-          onChange={newPropertyName => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
+          options={Object.keys(this.props.properties!).map(propName => [propName, propName])}
+          onChange={(newPropertyName: string) => this.onFilterPartChanged(filterOp, newPropertyName, filterArgs)}
         />
       </div>
       <div className="maputnik-filter-editor-operator">
         <InputSelect
           aria-label="function"
           value={filterOp}
-          onChange={newFilterOp => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
+          onChange={(newFilterOp: string) => this.onFilterPartChanged(newFilterOp, propertyName, filterArgs)}
           options={otherFilterOps}
         />
       </div>
@@ -84,12 +83,11 @@ export default class SingleFilterEditor extends React.Component {
         <InputString
           aria-label="value"
           value={filterArgs.join(',')}
-          onChange={ v=> this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
+          onChange={(v: string) => this.onFilterPartChanged(filterOp, propertyName, v.split(','))}
         />
       </div>
       }
     </div>
   }
-
 }
 
diff --git a/src/components/SmallError.jsx b/src/components/SmallError.tsx
similarity index 54%
rename from src/components/SmallError.jsx
rename to src/components/SmallError.tsx
index cbfe387b..5aff7478 100644
--- a/src/components/SmallError.jsx
+++ b/src/components/SmallError.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import './SmallError.scss';
 
 
-export default class SmallError extends React.Component {
-  static propTypes = {
-    children: PropTypes.node,
-  }
+type SmallErrorProps = {
+  children?: React.ReactNode
+};
 
+
+export default class SmallError extends React.Component<SmallErrorProps> {
   render () {
     return (
       <div className="SmallError">
@@ -15,5 +15,4 @@ export default class SmallError extends React.Component {
       </div>
     );
   }
-}
-
+}
\ No newline at end of file
diff --git a/src/components/SpecField.jsx b/src/components/SpecField.tsx
similarity index 71%
rename from src/components/SpecField.jsx
rename to src/components/SpecField.tsx
index cb55031e..c399cb83 100644
--- a/src/components/SpecField.jsx
+++ b/src/components/SpecField.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Block from './Block'
-import InputSpec from './InputSpec'
+import InputSpec, { SpecFieldProps as InputFieldSpecProps } from './InputSpec'
 import Fieldset from './Fieldset'
 
 
 const typeMap = {
   color: () => Block,
-  enum: ({fieldSpec}) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
+  enum: ({fieldSpec}: any) => (Object.keys(fieldSpec.values).length <= 3 ? Fieldset : Block),
   boolean: () => Block,
   array: () => Fieldset,
   resolvedImage: () => Block,
@@ -16,12 +15,11 @@ const typeMap = {
   formatted: () => Block,
 };
 
-export default class SpecField extends React.Component {
-  static propTypes = {
-    ...InputSpec.propTypes,
-    name: PropTypes.string,
-  }
+type SpecFieldProps = InputFieldSpecProps & {
+  name?: string
+};
 
+export default class SpecField extends React.Component<SpecFieldProps> {
   render() {
     const {props} = this;