From 66a0ee5d4e8c57af4b244ff1659961ef50594972 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 09:23:06 +0200
Subject: [PATCH 01/13] Initial migration of jsx files

---
 src/components/{Doc.jsx => Doc.tsx}           | 38 +++++++++++-------
 .../{InputButton.jsx => InputButton.tsx}      | 30 +++++++-------
 .../{InputCheckbox.jsx => InputCheckbox.tsx}  | 16 ++++----
 .../{InputSelect.jsx => InputSelect.tsx}      | 26 ++++++------
 .../{InputString.jsx => InputString.tsx}      | 40 ++++++++++---------
 .../{SmallError.jsx => SmallError.tsx}        | 13 +++---
 6 files changed, 84 insertions(+), 79 deletions(-)
 rename src/components/{Doc.jsx => Doc.tsx} (80%)
 rename src/components/{InputButton.jsx => InputButton.tsx} (53%)
 rename src/components/{InputCheckbox.jsx => InputCheckbox.tsx} (77%)
 rename src/components/{InputSelect.jsx => InputSelect.tsx} (53%)
 rename src/components/{InputString.jsx => InputString.tsx} (70%)
 rename src/components/{SmallError.jsx => SmallError.tsx} (54%)

diff --git a/src/components/Doc.jsx b/src/components/Doc.tsx
similarity index 80%
rename from src/components/Doc.jsx
rename to src/components/Doc.tsx
index 3285165cf..c5db0c4d7 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
@@ -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/InputButton.jsx b/src/components/InputButton.tsx
similarity index 53%
rename from src/components/InputButton.jsx
rename to src/components/InputButton.tsx
index e9c4b2351..bd8aaaa19 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 d93089651..55c9c758d 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,
-  }
+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/InputSelect.jsx b/src/components/InputSelect.tsx
similarity index 53%
rename from src/components/InputSelect.jsx
rename to src/components/InputSelect.tsx
index a138736fd..2259daf25 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,
-  }
 
+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 as string, v as any])
     }
 
     return <select
diff --git a/src/components/InputString.jsx b/src/components/InputString.tsx
similarity index 70%
rename from src/components/InputString.jsx
rename to src/components/InputString.tsx
index 3efd93d1a..0b3896f18 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,
-  }
+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,7 +72,7 @@ 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
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 cbfe387ba..5aff74780 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

From 1a09de238a8bfec16eef34d4c5763b1ba2638dec Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 09:24:59 +0200
Subject: [PATCH 02/13] Fix typescript error

---
 src/components/InputSelect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InputSelect.tsx b/src/components/InputSelect.tsx
index 2259daf25..e4b70930a 100644
--- a/src/components/InputSelect.tsx
+++ b/src/components/InputSelect.tsx
@@ -14,7 +14,7 @@ export default class InputSelect extends React.Component<InputSelectProps> {
   render() {
     let options = this.props.options;
     if(options.length > 0 && !Array.isArray(options[0])) {
-      options = options.map((v) => [v as string, v as any])
+      options = options.map((v) => [v, v]) as [string, any][];
     }
 
     return <select

From 19fc3970a9e64035c6b27d4a87cf05929de846f9 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 10:27:54 +0200
Subject: [PATCH 03/13] Migrate more components

---
 package-lock.json                             | 10 +++++++
 package.json                                  |  1 +
 .../{FieldDocLabel.jsx => FieldDocLabel.tsx}  | 25 +++++++++---------
 src/components/{Fieldset.jsx => Fieldset.tsx} | 24 +++++++++++------
 src/components/{Modal.jsx => Modal.tsx}       | 26 +++++++++----------
 src/components/ScrollContainer.jsx            | 15 -----------
 src/components/ScrollContainer.tsx            | 14 ++++++++++
 7 files changed, 67 insertions(+), 48 deletions(-)
 rename src/components/{FieldDocLabel.jsx => FieldDocLabel.tsx} (76%)
 rename src/components/{Fieldset.jsx => Fieldset.tsx} (75%)
 rename src/components/{Modal.jsx => Modal.tsx} (77%)
 delete mode 100644 src/components/ScrollContainer.jsx
 create mode 100644 src/components/ScrollContainer.tsx

diff --git a/package-lock.json b/package-lock.json
index 3eada999f..ca09a9fa2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
         "@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-dom": "^16.9.24",
         "@types/uuid": "^9.0.7",
         "@vitejs/plugin-react": "^4.2.0",
@@ -4831,6 +4832,15 @@
         "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-dom": {
       "version": "16.9.24",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.24.tgz",
diff --git a/package.json b/package.json
index 75b11d12b..7dc1709b6 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "@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-dom": "^16.9.24",
     "@types/uuid": "^9.0.7",
     "@vitejs/plugin-react": "^4.2.0",
diff --git a/src/components/FieldDocLabel.jsx b/src/components/FieldDocLabel.tsx
similarity index 76%
rename from src/components/FieldDocLabel.jsx
rename to src/components/FieldDocLabel.tsx
index fa4096b54..2bd5b5973 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
+  fieldSpec?: {
+    doc?: string
   }
+  onToggleDoc?(...args: unknown[]): unknown
+};
+
+type FieldDocLabelState = {
+  open: boolean
+};
 
-  constructor (props) {
+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,
     }, () => {
diff --git a/src/components/Fieldset.jsx b/src/components/Fieldset.tsx
similarity index 75%
rename from src/components/Fieldset.jsx
rename to src/components/Fieldset.tsx
index e6308b9b6..3b314e379 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 FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
+type FieldsetProps = {
+  label: string,
+  fieldSpec?: { doc?: string },
+  action?: string,
+};
+
+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/Modal.jsx b/src/components/Modal.tsx
similarity index 77%
rename from src/components/Modal.jsx
rename to src/components/Modal.tsx
index c62de0ef0..1b0c1dd4f 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/ScrollContainer.jsx b/src/components/ScrollContainer.jsx
deleted file mode 100644
index f66bbd72d..000000000
--- 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 000000000..cbff77a90
--- /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>
+  }
+}
+

From 0e39476bd950e5b999b25559bc6e67978e42bbf8 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 10:39:54 +0200
Subject: [PATCH 04/13] Migrate block and field doc label

---
 src/components/{Block.jsx => Block.tsx} | 50 ++++++++++++-------------
 src/components/FieldDocLabel.tsx        |  2 +-
 2 files changed, 25 insertions(+), 27 deletions(-)
 rename src/components/{Block.jsx => Block.tsx} (72%)

diff --git a/src/components/Block.jsx b/src/components/Block.tsx
similarity index 72%
rename from src/components/Block.jsx
rename to src/components/Block.tsx
index d3a2bffff..3aaa2aa3f 100644
--- a/src/components/Block.jsx
+++ b/src/components/Block.tsx
@@ -1,40 +1,41 @@
-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'
 
 
+type BlockProps = {
+  "data-wd-key"?: string
+  label?: string
+  action?: React.ReactElement
+  style?: object
+  onChange(...args: unknown[]): unknown
+  fieldSpec?: object
+  wideMode?: boolean
+  error?: unknown[]
+};
+
+type BlockState = {
+  showDoc: boolean
+};
+
 /** 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,
-  }
+export default class Block extends React.Component<BlockProps, BlockState> {
+  _blockEl: HTMLDivElement | null = null;
 
-  constructor (props) {
+  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)
   }
 
-  onToggleDoc = (val) => {
+  onToggleDoc = (val: boolean) => {
     this.setState({
       showDoc: val
     });
@@ -46,20 +47,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/FieldDocLabel.tsx b/src/components/FieldDocLabel.tsx
index 2bd5b5973..fb172bf7f 100644
--- a/src/components/FieldDocLabel.tsx
+++ b/src/components/FieldDocLabel.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {MdInfoOutline, MdHighlightOff} from 'react-icons/md'
 
 type FieldDocLabelProps = {
-  label: object | string
+  label: object | string | undefined
   fieldSpec?: {
     doc?: string
   }

From e5688fd9a54c5bff034e06f159d7ad0e9c263f94 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 11:58:20 +0200
Subject: [PATCH 05/13] More components migration

---
 package-lock.json                             | 20 +++++++++
 package.json                                  |  2 +
 src/components/Block.tsx                      |  6 ++-
 src/components/FieldUrl.jsx                   | 22 ----------
 src/components/FieldUrl.tsx                   | 22 ++++++++++
 ...{IconBackground.jsx => IconBackground.tsx} |  0
 .../{IconCircle.jsx => IconCircle.tsx}        |  0
 src/components/{IconFill.jsx => IconFill.tsx} |  0
 src/components/{IconLine.jsx => IconLine.tsx} |  0
 .../{IconMissing.jsx => IconMissing.tsx}      |  0
 .../{IconSymbol.jsx => IconSymbol.tsx}        |  0
 ...Autocomplete.jsx => InputAutocomplete.tsx} | 28 +++++++------
 src/components/{InputUrl.jsx => InputUrl.tsx} | 41 ++++++++++---------
 13 files changed, 85 insertions(+), 56 deletions(-)
 delete mode 100644 src/components/FieldUrl.jsx
 create mode 100644 src/components/FieldUrl.tsx
 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/{IconLine.jsx => IconLine.tsx} (100%)
 rename src/components/{IconMissing.jsx => IconMissing.tsx} (100%)
 rename src/components/{IconSymbol.jsx => IconSymbol.tsx} (100%)
 rename src/components/{InputAutocomplete.jsx => InputAutocomplete.tsx} (80%)
 rename src/components/{InputUrl.jsx => InputUrl.tsx} (71%)

diff --git a/package-lock.json b/package-lock.json
index ca09a9fa2..d489f9296 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,7 +72,9 @@
         "@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-dom": "^16.9.24",
+        "@types/react-icon-base": "^2.1.6",
         "@types/uuid": "^9.0.7",
         "@vitejs/plugin-react": "^4.2.0",
         "cors": "^2.8.5",
@@ -4841,6 +4843,15 @@
         "@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-dom": {
       "version": "16.9.24",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.24.tgz",
@@ -4850,6 +4861,15 @@
         "@types/react": "^16"
       }
     },
+    "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/resolve": {
       "version": "1.20.6",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz",
diff --git a/package.json b/package.json
index 7dc1709b6..2c3b67eb0 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,9 @@
     "@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-dom": "^16.9.24",
+    "@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.tsx b/src/components/Block.tsx
index 3aaa2aa3f..d7fe3709e 100644
--- a/src/components/Block.tsx
+++ b/src/components/Block.tsx
@@ -9,7 +9,7 @@ type BlockProps = {
   label?: string
   action?: React.ReactElement
   style?: object
-  onChange(...args: unknown[]): unknown
+  onChange?(...args: unknown[]): unknown
   fieldSpec?: object
   wideMode?: boolean
   error?: unknown[]
@@ -32,7 +32,9 @@ export default class Block extends React.Component<BlockProps, BlockState> {
 
   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: boolean) => {
diff --git a/src/components/FieldUrl.jsx b/src/components/FieldUrl.jsx
deleted file mode 100644
index 3c53b19bf..000000000
--- 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 000000000..9e7c23b0d
--- /dev/null
+++ b/src/components/FieldUrl.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
+import Block from './Block'
+
+
+type FieldUrlProps = InputUrlProps & {
+  label: string;
+};
+
+
+export default class FieldUrl extends React.Component<FieldUrlProps> {
+  render () {
+    const {props} = this;
+
+    return (
+      <Block label={this.props.label}>
+        <InputUrl {...props} />
+      </Block>
+    );
+  }
+}
+
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/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/InputAutocomplete.jsx b/src/components/InputAutocomplete.tsx
similarity index 80%
rename from src/components/InputAutocomplete.jsx
rename to src/components/InputAutocomplete.tsx
index c2848f09e..e574aca32 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,
-  }
+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/InputUrl.jsx b/src/components/InputUrl.tsx
similarity index 71%
rename from src/components/InputUrl.jsx
rename to src/components/InputUrl.tsx
index dd62caa70..db50b8cdc 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,42 @@ 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 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);
   }
 
-  onChange = (url) => {
+  onChange = (url: string) => {
     this.setState({
       error: validate(url)
     });

From 50226a9b2ebf4c0f391143307cb318fbfeaa168a Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 12:00:19 +0200
Subject: [PATCH 06/13] Fix build

---
 src/components/IconLayer.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/IconLayer.jsx b/src/components/IconLayer.jsx
index 559c0293f..fafb12703 100644
--- a/src/components/IconLayer.jsx
+++ b/src/components/IconLayer.jsx
@@ -1,12 +1,12 @@
 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 = {

From f435ab79c1f1f9cae69857d8809714c1dfad181d Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 13:14:34 +0200
Subject: [PATCH 07/13] More components migration

---
 src/components/FieldEnum.jsx                  | 20 -----
 src/components/FieldEnum.tsx                  | 17 ++++
 src/components/{FieldId.jsx => FieldId.tsx}   | 15 ++--
 .../{InputArray.jsx => InputArray.tsx}        | 47 +++++-----
 .../{InputEnum.jsx => InputEnum.tsx}          | 31 +++----
 .../{InputFont.jsx => InputFont.tsx}          | 26 +++---
 ...nputMultiInput.jsx => InputMultiInput.tsx} | 19 ++---
 .../{InputNumber.jsx => InputNumber.tsx}      | 85 ++++++++++---------
 src/components/InputString.tsx                |  6 +-
 9 files changed, 137 insertions(+), 129 deletions(-)
 delete mode 100644 src/components/FieldEnum.jsx
 create mode 100644 src/components/FieldEnum.tsx
 rename src/components/{FieldId.jsx => FieldId.tsx} (60%)
 rename src/components/{InputArray.jsx => InputArray.tsx} (67%)
 rename src/components/{InputEnum.jsx => InputEnum.tsx} (58%)
 rename src/components/{InputFont.jsx => InputFont.tsx} (72%)
 rename src/components/{InputMultiInput.jsx => InputMultiInput.tsx} (67%)
 rename src/components/{InputNumber.jsx => InputNumber.tsx} (74%)

diff --git a/src/components/FieldEnum.jsx b/src/components/FieldEnum.jsx
deleted file mode 100644
index f4268ecea..000000000
--- 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 000000000..054d3d3c7
--- /dev/null
+++ b/src/components/FieldEnum.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import InputEnum, {InputEnumProps} from './InputEnum'
+import Fieldset from './Fieldset';
+
+
+type FieldEnumProps = InputEnumProps & { label : string };
+
+
+export default class FieldEnum extends React.Component<FieldEnumProps> {
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputEnum {...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 1ce8cffc6..a4dba6169 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/InputArray.jsx b/src/components/InputArray.tsx
similarity index 67%
rename from src/components/InputArray.jsx
rename to src/components/InputArray.tsx
index 885688ffd..a0963ca16 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,
-  }
+type FieldArrayProps = {
+  value: string[]
+  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/InputEnum.jsx b/src/components/InputEnum.tsx
similarity index 58%
rename from src/components/InputEnum.jsx
rename to src/components/InputEnum.tsx
index 138d05bdf..93b1dece5 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 535408404..b015a8ed3 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,
-  }
-
+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/InputMultiInput.jsx b/src/components/InputMultiInput.tsx
similarity index 67%
rename from src/components/InputMultiInput.jsx
rename to src/components/InputMultiInput.tsx
index a9d2aad1d..632b8c3bc 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,
-  }
+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 f25628810..c7b044df6 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,
-  }
+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/InputString.tsx b/src/components/InputString.tsx
index 0b3896f18..75ef8f504 100644
--- a/src/components/InputString.tsx
+++ b/src/components/InputString.tsx
@@ -5,7 +5,7 @@ type InputStringProps = {
   value?: string
   style?: object
   default?: string
-  onChange(...args: unknown[]): unknown
+  onChange?(...args: unknown[]): unknown
   onInput(...args: unknown[]): unknown
   multi?: boolean
   required?: boolean
@@ -83,11 +83,11 @@ export default class InputString extends React.Component<InputStringProps, Input
       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);
         }
       },

From 732581c39e4ee32d087d751d26e13cb7b7453c09 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 13:30:19 +0200
Subject: [PATCH 08/13] More components migration

---
 package-lock.json                             | 45 ++++++++++++++++++
 package.json                                  |  2 +
 src/components/FieldString.jsx                | 20 --------
 src/components/FieldString.tsx                | 18 +++++++
 .../{FieldType.jsx => FieldType.tsx}          | 17 ++++---
 ...rEditorBlock.jsx => FilterEditorBlock.tsx} | 10 ++--
 .../{IconLayer.jsx => IconLayer.tsx}          | 11 ++---
 .../{InputColor.jsx => InputColor.tsx}        | 47 ++++++++++---------
 src/components/InputString.tsx                |  2 +-
 9 files changed, 107 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/FieldString.jsx
 create mode 100644 src/components/FieldString.tsx
 rename src/components/{FieldType.jsx => FieldType.tsx} (78%)
 rename src/components/{FilterEditorBlock.jsx => FilterEditorBlock.tsx} (73%)
 rename src/components/{IconLayer.jsx => IconLayer.tsx} (83%)
 rename src/components/{InputColor.jsx => InputColor.tsx} (79%)

diff --git a/package-lock.json b/package-lock.json
index d489f9296..aa242d6e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,12 +67,14 @@
         "@storybook/react": "^7.6.5",
         "@storybook/react-vite": "^7.6.5",
         "@storybook/theming": "^7.6.5",
+        "@types/color": "^3.0.6",
         "@types/cors": "^2.8.17",
         "@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-icon-base": "^2.1.6",
         "@types/uuid": "^9.0.7",
@@ -4586,6 +4588,30 @@
         "@types/chai": "*"
       }
     },
+    "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",
@@ -4852,6 +4878,16 @@
         "@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",
@@ -4870,6 +4906,15 @@
         "@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",
diff --git a/package.json b/package.json
index 2c3b67eb0..9c4be94b3 100644
--- a/package.json
+++ b/package.json
@@ -96,12 +96,14 @@
     "@storybook/react": "^7.6.5",
     "@storybook/react-vite": "^7.6.5",
     "@storybook/theming": "^7.6.5",
+    "@types/color": "^3.0.6",
     "@types/cors": "^2.8.17",
     "@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-icon-base": "^2.1.6",
     "@types/uuid": "^9.0.7",
diff --git a/src/components/FieldString.jsx b/src/components/FieldString.jsx
deleted file mode 100644
index 89d932740..000000000
--- 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 000000000..bc5a137e5
--- /dev/null
+++ b/src/components/FieldString.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import Block from './Block'
+import InputString, {InputStringProps} from './InputString'
+
+type FieldStringProps = InputStringProps & {
+  name?: string
+  label?: string
+};
+
+export default class FieldString extends React.Component<FieldStringProps> {
+  render() {
+    const {props} = this;
+
+    return <Block label={props.label}>
+      <InputString {...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 8d57ef420..da9549078 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/FilterEditorBlock.jsx b/src/components/FilterEditorBlock.tsx
similarity index 73%
rename from src/components/FilterEditorBlock.jsx
rename to src/components/FilterEditorBlock.tsx
index 7f02b6c39..021b52ab2 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/IconLayer.jsx b/src/components/IconLayer.tsx
similarity index 83%
rename from src/components/IconLayer.jsx
rename to src/components/IconLayer.tsx
index fafb12703..e92160ad2 100644
--- a/src/components/IconLayer.jsx
+++ b/src/components/IconLayer.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import IconLine from './IconLine'
 import IconFill from './IconFill'
@@ -8,12 +7,12 @@ 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/InputColor.jsx b/src/components/InputColor.tsx
similarity index 79%
rename from src/components/InputColor.jsx
rename to src/components/InputColor.tsx
index 02fb09659..7c919eddb 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,
-  }
+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/InputString.tsx b/src/components/InputString.tsx
index 75ef8f504..b00ecc26f 100644
--- a/src/components/InputString.tsx
+++ b/src/components/InputString.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-type InputStringProps = {
+export type InputStringProps = {
   "data-wd-key"?: string
   value?: string
   style?: object

From c633368a9a0e48d15f8d632cc480b2e29c508b3f Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 14:53:21 +0200
Subject: [PATCH 09/13] Migrate more components

---
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 src/components/Fieldset.tsx                   |   4 +-
 src/components/InputArray.tsx                 |   2 +-
 src/components/InputAutocomplete.tsx          |   2 +-
 src/components/InputCheckbox.tsx              |   2 +-
 src/components/InputColor.tsx                 |   2 +-
 ...DynamicArray.jsx => InputDynamicArray.tsx} |  60 ++++----
 src/components/InputEnum.tsx                  |   2 +-
 src/components/InputFont.tsx                  |   2 +-
 src/components/InputMultiInput.tsx            |   2 +-
 src/components/InputNumber.tsx                |   2 +-
 src/components/InputSpec.jsx                  | 139 ------------------
 src/components/InputSpec.tsx                  | 126 ++++++++++++++++
 src/components/InputString.tsx                |   4 +-
 .../{SpecField.jsx => SpecField.tsx}          |  14 +-
 16 files changed, 187 insertions(+), 187 deletions(-)
 rename src/components/{InputDynamicArray.jsx => InputDynamicArray.tsx} (70%)
 delete mode 100644 src/components/InputSpec.jsx
 create mode 100644 src/components/InputSpec.tsx
 rename src/components/{SpecField.jsx => SpecField.tsx} (71%)

diff --git a/package-lock.json b/package-lock.json
index aa242d6e1..21ee9a7dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,6 +69,7 @@
         "@storybook/theming": "^7.6.5",
         "@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",
@@ -4732,6 +4733,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",
diff --git a/package.json b/package.json
index 9c4be94b3..8bf44847e 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "@storybook/theming": "^7.6.5",
     "@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",
diff --git a/src/components/Fieldset.tsx b/src/components/Fieldset.tsx
index 3b314e379..ab095064f 100644
--- a/src/components/Fieldset.tsx
+++ b/src/components/Fieldset.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 type FieldsetProps = {
   label: string,
   fieldSpec?: { doc?: string },
-  action?: string,
+  action?: ReactElement,
 };
 
 type FieldsetState = {
diff --git a/src/components/InputArray.tsx b/src/components/InputArray.tsx
index a0963ca16..ae4aa2da3 100644
--- a/src/components/InputArray.tsx
+++ b/src/components/InputArray.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import InputString from './InputString'
 import InputNumber from './InputNumber'
 
-type FieldArrayProps = {
+export type FieldArrayProps = {
   value: string[]
   type?: string
   length?: number
diff --git a/src/components/InputAutocomplete.tsx b/src/components/InputAutocomplete.tsx
index e574aca32..fabaa16fc 100644
--- a/src/components/InputAutocomplete.tsx
+++ b/src/components/InputAutocomplete.tsx
@@ -5,7 +5,7 @@ import Autocomplete from 'react-autocomplete'
 
 const MAX_HEIGHT = 140;
 
-type InputAutocompleteProps = {
+export type InputAutocompleteProps = {
   value?: string
   options: any[]
   onChange(...args: unknown[]): unknown
diff --git a/src/components/InputCheckbox.tsx b/src/components/InputCheckbox.tsx
index 55c9c758d..a799e5a36 100644
--- a/src/components/InputCheckbox.tsx
+++ b/src/components/InputCheckbox.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-type InputCheckboxProps = {
+export type InputCheckboxProps = {
   value?: boolean
   style?: object
   onChange(...args: unknown[]): unknown
diff --git a/src/components/InputColor.tsx b/src/components/InputColor.tsx
index 7c919eddb..ad1c6e767 100644
--- a/src/components/InputColor.tsx
+++ b/src/components/InputColor.tsx
@@ -9,7 +9,7 @@ function formatColor(color: ColorResult): string {
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
 }
 
-type InputColorProps = {
+export type InputColorProps = {
   onChange(...args: unknown[]): unknown
   name?: string
   value?: string
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 bf3537073..aef615f7e 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.tsx b/src/components/InputEnum.tsx
index 93b1dece5..a8f40d3f7 100644
--- a/src/components/InputEnum.tsx
+++ b/src/components/InputEnum.tsx
@@ -17,7 +17,7 @@ export type InputEnumProps = {
   value?: string
   style?: object
   default?: string
-  name: string
+  name?: string
   onChange(...args: unknown[]): unknown
   options: any[]
   'aria-label'?: string
diff --git a/src/components/InputFont.tsx b/src/components/InputFont.tsx
index b015a8ed3..7bdaf9fa9 100644
--- a/src/components/InputFont.tsx
+++ b/src/components/InputFont.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import InputAutocomplete from './InputAutocomplete'
 
-type FieldFontProps = {
+export type FieldFontProps = {
   name: string
   value?: string[]
   default?: string[]
diff --git a/src/components/InputMultiInput.tsx b/src/components/InputMultiInput.tsx
index 632b8c3bc..f58bbcc6c 100644
--- a/src/components/InputMultiInput.tsx
+++ b/src/components/InputMultiInput.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 type InputMultiInputProps = {
-  name: string
+  name?: string
   value: string
   options: any[]
   onChange(...args: unknown[]): unknown
diff --git a/src/components/InputNumber.tsx b/src/components/InputNumber.tsx
index c7b044df6..eb7d6e182 100644
--- a/src/components/InputNumber.tsx
+++ b/src/components/InputNumber.tsx
@@ -2,7 +2,7 @@ import React, { BaseSyntheticEvent } from 'react'
 
 let IDX = 0;
 
-type InputNumberProps = {
+export type InputNumberProps = {
   value?: number
   default?: number
   min?: number
diff --git a/src/components/InputSpec.jsx b/src/components/InputSpec.jsx
deleted file mode 100644
index 021a97870..000000000
--- 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 000000000..f79bb4daa
--- /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.tsx b/src/components/InputString.tsx
index b00ecc26f..ee1d0bc6e 100644
--- a/src/components/InputString.tsx
+++ b/src/components/InputString.tsx
@@ -6,7 +6,7 @@ export type InputStringProps = {
   style?: object
   default?: string
   onChange?(...args: unknown[]): unknown
-  onInput(...args: unknown[]): unknown
+  onInput?(...args: unknown[]): unknown
   multi?: boolean
   required?: boolean
   disabled?: boolean
@@ -77,7 +77,7 @@ export default class InputString extends React.Component<InputStringProps, Input
           editing: true,
           value: e.target.value
         }, () => {
-          this.props.onInput(this.state.value);
+          if (this.props.onInput) this.props.onInput(this.state.value);
         });
       },
       onBlur: () => {
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 cb55031ee..c399cb83b 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;
 

From df65cc3effad4d867703aeaac3cbfc1dbadffd31 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 15:16:41 +0200
Subject: [PATCH 10/13] Migrate more components

---
 package-lock.json                             | 19 ++++
 package.json                                  |  1 +
 .../{InputJson.jsx => InputJson.tsx}          | 94 ++++++++++---------
 ...ilterEditor.jsx => SingleFilterEditor.tsx} | 38 ++++----
 4 files changed, 86 insertions(+), 66 deletions(-)
 rename src/components/{InputJson.jsx => InputJson.tsx} (64%)
 rename src/components/{SingleFilterEditor.jsx => SingleFilterEditor.tsx} (61%)

diff --git a/package-lock.json b/package-lock.json
index 21ee9a7dc..0ef80846a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
         "@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",
@@ -4589,6 +4590,15 @@
         "@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",
@@ -4976,6 +4986,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 8bf44847e..a217705dd 100644
--- a/package.json
+++ b/package.json
@@ -96,6 +96,7 @@
     "@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",
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 54bac981d..21d49bc8c 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,
-    ]),
-  }
-
+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/SingleFilterEditor.jsx b/src/components/SingleFilterEditor.tsx
similarity index 61%
rename from src/components/SingleFilterEditor.jsx
rename to src/components/SingleFilterEditor.tsx
index 752a2d5d3..63661a600 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>
   }
-
 }
 

From 901be16ae42fa0abb1e8d59414b16c3670ec76bb Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 20:44:39 +0200
Subject: [PATCH 11/13] Migrate more components, fix spec documentation missing
 information

---
 src/components/FieldArray.jsx                 | 21 ---------
 src/components/FieldArray.tsx                 | 19 ++++++++
 src/components/FieldColor.jsx                 | 20 --------
 src/components/FieldColor.tsx                 | 21 +++++++++
 src/components/FieldEnum.tsx                  | 13 +++--
 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.tsx                |  9 ++--
 src/components/FieldUrl.tsx                   |  9 ++--
 src/components/Fieldset.tsx                   |  2 +-
 src/components/InputArray.tsx                 |  2 +-
 src/components/InputJson.tsx                  |  2 +-
 src/components/InputMultiInput.tsx            |  2 +-
 src/components/InputSelect.tsx                |  2 +-
 src/components/InputUrl.tsx                   |  4 +-
 .../{ModalSettings.jsx => ModalSettings.tsx}  | 47 ++++++++++---------
 ...{ModalShortcuts.jsx => ModalShortcuts.tsx} | 12 ++---
 .../{ModalSurvey.jsx => ModalSurvey.tsx}      | 12 ++---
 26 files changed, 188 insertions(+), 186 deletions(-)
 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
 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
 rename src/components/{ModalSettings.jsx => ModalSettings.tsx} (85%)
 rename src/components/{ModalShortcuts.jsx => ModalShortcuts.tsx} (93%)
 rename src/components/{ModalSurvey.jsx => ModalSurvey.tsx} (85%)

diff --git a/src/components/FieldArray.jsx b/src/components/FieldArray.jsx
deleted file mode 100644
index 00103fc35..000000000
--- 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 000000000..1de04ee96
--- /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 2e9067bee..000000000
--- 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 000000000..37d11b1ad
--- /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/FieldEnum.tsx b/src/components/FieldEnum.tsx
index 054d3d3c7..25a466892 100644
--- a/src/components/FieldEnum.tsx
+++ b/src/components/FieldEnum.tsx
@@ -3,15 +3,18 @@ import InputEnum, {InputEnumProps} from './InputEnum'
 import Fieldset from './Fieldset';
 
 
-type FieldEnumProps = InputEnumProps & { label : string };
+type FieldEnumProps = InputEnumProps & { 
+  label?: string;
+  fieldSpec?: {
+    doc: string
+  }
+};
 
 
 export default class FieldEnum extends React.Component<FieldEnumProps> {
   render() {
-    const {props} = this;
-
-    return <Fieldset label={props.label}>
-      <InputEnum {...props} />
+    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/FieldJson.jsx b/src/components/FieldJson.jsx
deleted file mode 100644
index 1f6cceab3..000000000
--- 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 000000000..ceb4d663c
--- /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 e256a69f8..1ebefc8cd 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 f33b54094..a3a7a7598 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 ae5daf6b3..000000000
--- 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 000000000..994480d9e
--- /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 0d42ddf83..000000000
--- 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 000000000..4c8ede98c
--- /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 1d279c6fc..000000000
--- 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 000000000..2e0a7be68
--- /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.tsx b/src/components/FieldString.tsx
index bc5a137e5..833d83ea4 100644
--- a/src/components/FieldString.tsx
+++ b/src/components/FieldString.tsx
@@ -5,14 +5,15 @@ import InputString, {InputStringProps} from './InputString'
 type FieldStringProps = InputStringProps & {
   name?: string
   label?: string
+  fieldSpec?: {
+    doc: string
+  }
 };
 
 export default class FieldString extends React.Component<FieldStringProps> {
   render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputString {...props} />
+    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+      <InputString {...this.props} />
     </Block>
   }
 }
diff --git a/src/components/FieldUrl.tsx b/src/components/FieldUrl.tsx
index 9e7c23b0d..2c4661fd3 100644
--- a/src/components/FieldUrl.tsx
+++ b/src/components/FieldUrl.tsx
@@ -5,16 +5,17 @@ import Block from './Block'
 
 type FieldUrlProps = InputUrlProps & {
   label: string;
+  fieldSpec?: {
+    doc: string
+  }
 };
 
 
 export default class FieldUrl extends React.Component<FieldUrlProps> {
   render () {
-    const {props} = this;
-
     return (
-      <Block label={this.props.label}>
-        <InputUrl {...props} />
+      <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
+        <InputUrl {...this.props} />
       </Block>
     );
   }
diff --git a/src/components/Fieldset.tsx b/src/components/Fieldset.tsx
index ab095064f..db4b4a38e 100644
--- a/src/components/Fieldset.tsx
+++ b/src/components/Fieldset.tsx
@@ -3,7 +3,7 @@ import FieldDocLabel from './FieldDocLabel'
 import Doc from './Doc'
 
 type FieldsetProps = {
-  label: string,
+  label?: string,
   fieldSpec?: { doc?: string },
   action?: ReactElement,
 };
diff --git a/src/components/InputArray.tsx b/src/components/InputArray.tsx
index ae4aa2da3..0d2a79c3a 100644
--- a/src/components/InputArray.tsx
+++ b/src/components/InputArray.tsx
@@ -3,7 +3,7 @@ import InputString from './InputString'
 import InputNumber from './InputNumber'
 
 export type FieldArrayProps = {
-  value: string[]
+  value: string[] | number[]
   type?: string
   length?: number
   default?: string[] | number[]
diff --git a/src/components/InputJson.tsx b/src/components/InputJson.tsx
index 21d49bc8c..cf1d35297 100644
--- a/src/components/InputJson.tsx
+++ b/src/components/InputJson.tsx
@@ -11,7 +11,7 @@ import stringifyPretty from 'json-stringify-pretty-compact'
 import '../util/codemirror-mgl';
 
 
-type InputJsonProps = {
+export type InputJsonProps = {
   layer: any
   maxHeight?: number
   onChange?(...args: unknown[]): unknown
diff --git a/src/components/InputMultiInput.tsx b/src/components/InputMultiInput.tsx
index f58bbcc6c..64529c48e 100644
--- a/src/components/InputMultiInput.tsx
+++ b/src/components/InputMultiInput.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-type InputMultiInputProps = {
+export type InputMultiInputProps = {
   name?: string
   value: string
   options: any[]
diff --git a/src/components/InputSelect.tsx b/src/components/InputSelect.tsx
index e4b70930a..9a8f94856 100644
--- a/src/components/InputSelect.tsx
+++ b/src/components/InputSelect.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-type InputSelectProps = {
+export type InputSelectProps = {
   value: string
   "data-wd-key"?: string
   options: [string, any][] | string[]
diff --git a/src/components/InputUrl.tsx b/src/components/InputUrl.tsx
index db50b8cdc..2e22712a9 100644
--- a/src/components/InputUrl.tsx
+++ b/src/components/InputUrl.tsx
@@ -53,7 +53,7 @@ export type FieldUrlProps = {
   style?: object
   default?: string
   onChange(...args: unknown[]): unknown
-  onInput(...args: unknown[]): unknown
+  onInput?(...args: unknown[]): unknown
   multi?: boolean
   required?: boolean
   'aria-label'?: string
@@ -79,7 +79,7 @@ export default class FieldUrl extends React.Component<FieldUrlProps, FieldUrlSta
     this.setState({
       error: validate(url)
     });
-    this.props.onInput(url);
+    if (this.props.onInput) this.props.onInput(url);
   }
 
   onChange = (url: string) => {
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 973a68864..14afc108e 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 ebe8a0e93..dc7e14b4a 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 13ab93959..59c1d1f7c 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');
 

From ab102dccd7da3ff9b5e848a3634c8084540f4357 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 22:00:16 +0200
Subject: [PATCH 12/13] Add a test to make sure this functionality doesn't get
 broken

---
 cypress/e2e/modals.cy.ts         | 7 +++++++
 src/components/Doc.tsx           | 2 +-
 src/components/FieldDocLabel.tsx | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/modals.cy.ts b/cypress/e2e/modals.cy.ts
index e5fd505f7..911deef66 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/src/components/Doc.tsx b/src/components/Doc.tsx
index c5db0c4d7..92937522f 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -39,7 +39,7 @@ export default class Doc extends React.Component<DocProps> {
       <>
         {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]) => {
diff --git a/src/components/FieldDocLabel.tsx b/src/components/FieldDocLabel.tsx
index fb172bf7f..fde175d7f 100644
--- a/src/components/FieldDocLabel.tsx
+++ b/src/components/FieldDocLabel.tsx
@@ -44,6 +44,7 @@ export default class FieldDocLabel extends React.Component<FieldDocLabelProps, F
             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>

From c7c1139e8706975593869f8ff8599807aa7cb1e3 Mon Sep 17 00:00:00 2001
From: HarelM <harel.mazor@gmail.com>
Date: Thu, 21 Dec 2023 22:23:31 +0200
Subject: [PATCH 13/13] More typescript migration

---
 package-lock.json                             | 10 +++
 package.json                                  |  1 +
 src/components/InputUrl.tsx                   |  2 +
 .../{ModalLoading.jsx => ModalLoading.tsx}    | 22 +++---
 .../{ModalOpen.jsx => ModalOpen.tsx}          | 70 ++++++++++---------
 5 files changed, 62 insertions(+), 43 deletions(-)
 rename src/components/{ModalLoading.jsx => ModalLoading.tsx} (64%)
 rename src/components/{ModalOpen.jsx => ModalOpen.tsx} (82%)

diff --git a/package-lock.json b/package-lock.json
index 0ef80846a..24fa69199 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78,6 +78,7 @@
         "@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",
@@ -4917,6 +4918,15 @@
         "@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",
diff --git a/package.json b/package.json
index a217705dd..fd9e96242 100644
--- a/package.json
+++ b/package.json
@@ -107,6 +107,7 @@
     "@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",
diff --git a/src/components/InputUrl.tsx b/src/components/InputUrl.tsx
index 2e22712a9..e8a9196ff 100644
--- a/src/components/InputUrl.tsx
+++ b/src/components/InputUrl.tsx
@@ -57,6 +57,8 @@ export type FieldUrlProps = {
   multi?: boolean
   required?: boolean
   'aria-label'?: string
+  type?: string
+  className?: string
 };
 
 type FieldUrlState = {
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 07303c3c3..f6f132e7b 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 6b542941e..da7aaeebf 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
+};
+
+type ModalOpenState = {
+  styleUrl: string
+  error?: string | null
+  activeRequest?: any
+  activeRequestUrl?: string | null
+};
 
-  constructor(props) {
+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>