More conversion from jsx to tsx

package-lock.json

@@ -70,12 +70,14 @@
         "@types/codemirror": "^5.60.15",
         "@types/color": "^3.0.6",
         "@types/cors": "^2.8.17",
+        "@types/file-saver": "^2.0.7",
         "@types/lodash.capitalize": "^4.2.9",
         "@types/lodash.isequal": "^4.5.8",
         "@types/lodash.throttle": "^4.1.9",
         "@types/react": "^16.14.52",
         "@types/react-aria-modal": "^4.0.9",
         "@types/react-autocomplete": "^1.8.9",
+        "@types/react-collapse": "^5.0.4",
         "@types/react-color": "^3.0.10",
         "@types/react-dom": "^16.9.24",
         "@types/react-file-reader-input": "^2.0.4",
@@ -4711,6 +4713,12 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
+      "integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
+      "dev": true
+    },
     "node_modules/@types/find-cache-dir": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
@@ -4899,6 +4907,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-collapse": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-collapse/-/react-collapse-5.0.4.tgz",
+      "integrity": "sha512-tM5cVB6skGLneNYnRK2E3R56VOHguSeJQHslGPTIMC58ytL3oelT8L/l1onkwHGn5vSEs2BEq2Olzrur+YdliA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-color": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.10.tgz",

package.json

@@ -99,12 +99,14 @@
     "@types/codemirror": "^5.60.15",
     "@types/color": "^3.0.6",
     "@types/cors": "^2.8.17",
+    "@types/file-saver": "^2.0.7",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",
     "@types/react": "^16.14.52",
     "@types/react-aria-modal": "^4.0.9",
     "@types/react-autocomplete": "^1.8.9",
+    "@types/react-collapse": "^5.0.4",
     "@types/react-color": "^3.0.10",
     "@types/react-dom": "^16.9.24",
     "@types/react-file-reader-input": "^2.0.4",

src/components/Collapse.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { Collapse as ReactCollapse } from 'react-collapse'
-import {reducedMotionEnabled} from '../../libs/accessibility'
+import {reducedMotionEnabled} from '../libs/accessibility'
 
 
-export default class Collapse extends React.Component {
+type CollapseProps = {
-  static propTypes = {
+  isActive: boolean
-    isActive: PropTypes.bool.isRequired,
+  children: React.ReactElement
-    children: PropTypes.element.isRequired
+};
-  }
 
+
+export default class Collapse extends React.Component<CollapseProps> {
   static defaultProps = {
     isActive: true
   }

src/components/Collapser.tsx

@@ -1,13 +1,12 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {MdArrowDropDown, MdArrowDropUp} from 'react-icons/md'
 
-export default class Collapser extends React.Component {
+type CollapserProps = {
-  static propTypes = {
+  isCollapsed: boolean
-    isCollapsed: PropTypes.bool.isRequired,
+  style?: object
-    style: PropTypes.object,
+};
-  }
 
+export default class Collapser extends React.Component<CollapserProps> {
   render() {
     const iconStyle = {
       width: 20,

src/components/FieldAutocomplete.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputAutocomplete from './InputAutocomplete'
-
-
-export default class FieldAutocomplete extends React.Component {
-  static propTypes = {
-    ...InputAutocomplete.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={props.label}>
-      <InputAutocomplete {...props} />
-    </Block>
-  }
-}
-

src/components/FieldAutocomplete.tsx

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

src/components/FieldCheckbox.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputCheckbox from './InputCheckbox'
-
-
-export default class FieldCheckbox extends React.Component {
-  static propTypes = {
-    ...InputCheckbox.propTypes,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Block label={this.props.label}>
-      <InputCheckbox {...props} />
-    </Block>
-  }
-}
-

src/components/FieldCheckbox.tsx

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

src/components/FieldComment.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Block from './Block'
 import InputString from './InputString'
 
-export default class FieldComment extends React.Component {
+type FieldCommentProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+};
-  }
 
+export default class FieldComment extends React.Component<FieldCommentProps> {
   render() {
     const fieldSpec = {
       doc: "Comments for the current layer. This is non-standard and not in the spec."

src/components/FieldDynamicArray.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Block from './Block'
-import InputDynamicArray from './InputDynamicArray'
-import Fieldset from './Fieldset'
-
-export default class FieldDynamicArray extends React.Component {
-  static propTypes = {
-    ...InputDynamicArray.propTypes,
-    name: PropTypes.string,
-  }
-
-  render() {
-    const {props} = this;
-
-    return <Fieldset label={props.label}>
-      <InputDynamicArray {...props} />
-    </Fieldset>
-  }
-}
-

src/components/FieldDynamicArray.tsx

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

src/components/FieldSource.tsx

@@ -1,19 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 
-export default class FieldSource extends React.Component {
+type FieldSourceProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  wdKey?: string
-    wdKey: PropTypes.string,
+  onChange?(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  sourceIds?: unknown[]
-    sourceIds: PropTypes.array,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+export default class FieldSource extends React.Component<FieldSourceProps> {
   static defaultProps = {
     onChange: () => {},
     sourceIds: [],
@@ -29,7 +28,7 @@ export default class FieldSource extends React.Component {
       <InputAutocomplete
         value={this.props.value}
         onChange={this.props.onChange}
-        options={this.props.sourceIds.map(src => [src, src])}
+        options={this.props.sourceIds?.map(src => [src, src])}
       />
     </Block>
   }

src/components/FieldSourceLayer.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 InputAutocomplete from './InputAutocomplete'
 
-export default class FieldSourceLayer extends React.Component {
+type FieldSourceLayerProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  onChange?(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  sourceLayerIds?: unknown[]
-    sourceLayerIds: PropTypes.array,
+  isFixed?: boolean
-    isFixed: PropTypes.bool,
+};
-  }
 
+export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
@@ -27,7 +26,7 @@ export default class FieldSourceLayer extends React.Component {
         keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
         onChange={this.props.onChange}
-        options={this.props.sourceLayerIds.map(l => [l, l])}
+        options={this.props.sourceLayerIds?.map(l => [l, l])}
       />
     </Block>
   }

src/components/InputDynamicArray.tsx

@@ -12,7 +12,7 @@ import InputUrl from './InputUrl'
 
 export type FieldDynamicArrayProps = {
   value?: (string | number)[]
-  type?: 'url' | 'number' | 'enum'
+  type?: 'url' | 'number' | 'enum' | 'string'
   default?: (string | number)[]
   onChange?(...args: unknown[]): unknown
   style?: object

src/components/InputJson.tsx

@@ -17,7 +17,7 @@ export type InputJsonProps = {
   onChange?(...args: unknown[]): unknown
   lineNumbers?: boolean
   lineWrapping?: boolean
-  getValue(data: any): string
+  getValue?(data: any): string
   gutters?: string[]
   className?: string
   onFocus?(...args: unknown[]): unknown
@@ -58,13 +58,13 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
     this.state = {
       isEditing: false,
       showMessage: false,
-      prevValue: this.props.getValue(this.props.layer),
+      prevValue: this.props.getValue!(this.props.layer),
     };
   }
 
   componentDidMount () {
     this._doc = CodeMirror(this._el!, {
-      value: this.props.getValue(this.props.layer),
+      value: this.props.getValue!(this.props.layer),
       mode: this.props.mode || {
         name: "mgl",
       },
@@ -117,7 +117,7 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
     if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
       this._cancelNextChange = true;
       this._doc!.setValue(
-        this.props.getValue(this.props.layer),
+        this.props.getValue!(this.props.layer),
       )
     }
   }

src/components/InputSpec.tsx

@@ -14,8 +14,8 @@ 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
+  onChange?(...args: unknown[]): unknown
-  fieldName: string
+  fieldName?: string
   fieldSpec: {
     default?: unknown
     type: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
@@ -49,7 +49,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       value: this.props.value,
       default: this.props.fieldSpec.default,
       name: this.props.fieldName,
-      onChange: (newValue: string) => this.props.onChange(this.props.fieldName, newValue),
+      onChange: (newValue: string) => this.props.onChange!(this.props.fieldName, newValue),
       'aria-label': this.props['aria-label'],
     }
     switch(this.props.fieldSpec.type) {
@@ -70,7 +70,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       case 'resolvedImage':
       case 'formatted':
       case 'string':
-        if (iconProperties.indexOf(this.props.fieldName) >= 0) {
+        if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
           const options = this.props.fieldSpec.values || [];
           return <InputAutocomplete
             {...commonProps as Omit<InputAutocompleteProps, "options">}

src/components/ModalAdd.tsx

@@ -1,29 +1,32 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
 import InputButton from './InputButton'
 import Modal from './Modal'
-
 import FieldType from './FieldType'
 import FieldId from './FieldId'
 import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
 
-export default class ModalAdd extends React.Component {
+type ModalAddProps = {
-  static propTypes = {
+  layers: unknown[]
-    layers: PropTypes.array.isRequired,
+  onLayersChange(...args: unknown[]): unknown
-    onLayersChange: PropTypes.func.isRequired,
+  isOpen: boolean
-    isOpen: PropTypes.bool.isRequired,
+  onOpenToggle(...args: unknown[]): unknown
-    onOpenToggle: PropTypes.func.isRequired,
-
   // A dict of source id's and the available source layers
-    sources: PropTypes.object.isRequired,
+  sources: any
-  }
+};
 
+type ModalAddState = {
+  type: string
+  id: string
+  source?: string
+  'source-layer'?: string
+};
+
+export default class ModalAdd extends React.Component<ModalAddProps, ModalAddState> {
   addLayer = () => {
     const changedLayers = this.props.layers.slice(0)
-    const layer = {
+    const layer: ModalAddState = {
       id: this.state.id,
       type: this.state.type,
     }
@@ -41,20 +44,21 @@ export default class ModalAdd extends React.Component {
     this.props.onOpenToggle(false)
   }
 
-  constructor(props) {
+  constructor(props: ModalAddProps) {
     super(props)
-    this.state = {
+    const state: ModalAddState = {
       type: 'fill',
       id: '',
     }
 
     if(props.sources.length > 0) {
-      this.state.source = Object.keys(this.props.sources)[0]
+      state.source = Object.keys(this.props.sources)[0];
-      this.state['source-layer'] = this.props.sources[this.state.source][0]
+      state['source-layer'] = this.props.sources[state.source as keyof ModalAddProps["sources"]][0]
     }
+    this.state = state;
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_prevProps: ModalAddProps, prevState: ModalAddState) {
     // Check if source is valid for new type
     const oldType = prevState.type;
     const newType = this.state.type;
@@ -67,9 +71,9 @@ export default class ModalAdd extends React.Component {
       oldType !== newType
       && prevState.source !== ""
       // Was a valid source previously
-      && availableSourcesOld.indexOf(prevState.source) > -1
+      && availableSourcesOld.indexOf(prevState.source!) > -1
       // And is not a valid source now
-      && availableSourcesNew.indexOf(this.state.source) < 0
+      && availableSourcesNew.indexOf(this.state.source!) < 0
     ) {
       // Clear the source
       this.setState({
@@ -78,12 +82,12 @@ export default class ModalAdd extends React.Component {
     }
   }
 
-  getLayersForSource(source) {
+  getLayersForSource(source: string) {
     const sourceObj = this.props.sources[source] || {};
     return sourceObj.layers || [];
   }
 
-  getSources(type) {
+  getSources(type: string) {
     const sources = [];
 
     const types = {
@@ -108,8 +112,9 @@ export default class ModalAdd extends React.Component {
       ]
     }
 
-    for(let [key, val] of Object.entries(this.props.sources)) {
+    for(let [key, val] of Object.entries(this.props.sources) as any) {
-      if(types[val.type] && types[val.type].indexOf(type) > -1) {
+      const valType = val.type as keyof typeof types;
+      if(types[valType] && types[valType].indexOf(type) > -1) {
         sources.push(key);
       }
     }
@@ -120,7 +125,7 @@ export default class ModalAdd extends React.Component {
 
   render() {
     const sources = this.getSources(this.state.type);
-    const layers = this.getLayersForSource(this.state.source);
+    const layers = this.getLayersForSource(this.state.source!);
 
     return <Modal
       isOpen={this.props.isOpen}
@@ -131,25 +136,23 @@ export default class ModalAdd extends React.Component {
     >
       <div className="maputnik-add-layer">
       <FieldId
-        label="ID"
-        fieldSpec={latest.layer.id}
         value={this.state.id}
         wdKey="add-layer.layer-id"
-        onChange={v => {
+        onChange={(v: string) => {
           this.setState({ id: v })
         }}
       />
       <FieldType
         value={this.state.type}
         wdKey="add-layer.layer-type"
-        onChange={v => this.setState({ type: v })}
+        onChange={(v: string) => this.setState({ type: v })}
       />
       {this.state.type !== 'background' &&
       <FieldSource
         sourceIds={sources}
         wdKey="add-layer.layer-source-block"
         value={this.state.source}
-        onChange={v => this.setState({ source: v })}
+        onChange={(v: string) => this.setState({ source: v })}
       />
       }
       {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
@@ -157,7 +160,7 @@ export default class ModalAdd extends React.Component {
         isFixed={true}
         sourceLayerIds={layers}
         value={this.state['source-layer']}
-        onChange={v => this.setState({ 'source-layer': v })}
+        onChange={(v: string) => this.setState({ 'source-layer': v })}
       />
       }
       <InputButton

src/components/ModalDebug.tsx

@@ -1,21 +1,27 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Modal from './Modal'
 
 
-export default class ModalDebug extends React.Component {
+type ModalDebugProps = {
-  static propTypes = {
+  isOpen: boolean
-    isOpen: PropTypes.bool.isRequired,
+  renderer: string
-    renderer: PropTypes.string.isRequired,
+  onChangeMaboxGlDebug(...args: unknown[]): unknown
-    onChangeMaboxGlDebug: PropTypes.func.isRequired,
+  onChangeOpenlayersDebug(...args: unknown[]): unknown
-    onChangeOpenlayersDebug: PropTypes.func.isRequired,
+  onOpenToggle(...args: unknown[]): unknown
-    onOpenToggle: PropTypes.func.isRequired,
+  maplibreGlDebugOptions?: object
-    maplibreGlDebugOptions: PropTypes.object,
+  openlayersDebugOptions?: object
-    openlayersDebugOptions: PropTypes.object,
+  mapView: {
-    mapView: PropTypes.object,
+    zoom: number
+    center: {
+      lng: string
+      lat: string
     }
+  }
+};
 
+
+export default class ModalDebug extends React.Component<ModalDebugProps> {
   render() {
     const {mapView} = this.props;
 
@@ -33,10 +39,10 @@ export default class ModalDebug extends React.Component {
         <h1>Options</h1>
         {this.props.renderer === 'mlgljs' &&
           <ul>
-            {Object.entries(this.props.maplibreGlDebugOptions).map(([key, val]) => {
+            {Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
               return <li key={key}>
                 <label>
-                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
+                  <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
                 </label>
               </li>
             })}
@@ -44,10 +50,10 @@ export default class ModalDebug extends React.Component {
         }
         {this.props.renderer === 'ol' &&
           <ul>
-            {Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
+            {Object.entries(this.props.openlayersDebugOptions!).map(([key, val]) => {
               return <li key={key}>
                 <label>
-                  <input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
+                  <input type="checkbox" checked={val} onChange={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
                 </label>
               </li>
             })}

src/components/ModalExport.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Slugify from 'slugify'
 import {saveAs} from 'file-saver'
-import {version} from 'maplibre-gl'
+import {version} from 'maplibre-gl/package.json'
-import {format} from '@maplibre/maplibre-gl-style-spec'
+import {StyleSpecification, format} from '@maplibre/maplibre-gl-style-spec'
+import {MdFileDownload} from 'react-icons/md'
+
 import FieldString from './FieldString'
 import InputButton from './InputButton'
 import Modal from './Modal'
-import {MdFileDownload} from 'react-icons/md'
 import style from '../libs/style'
 import fieldSpecAdditional from '../libs/field-spec-additional'
 
@@ -15,17 +15,15 @@ import fieldSpecAdditional from '../libs/field-spec-additional'
 const MAPLIBRE_GL_VERSION = version;
 
 
-export default class ModalExport extends React.Component {
+type ModalExportProps = {
-  static propTypes = {
+  mapStyle: StyleSpecification & { id: string }
-    mapStyle: PropTypes.object.isRequired,
+  onStyleChanged(...args: unknown[]): unknown
-    onStyleChanged: PropTypes.func.isRequired,
+  isOpen: boolean
-    isOpen: PropTypes.bool.isRequired,
+  onOpenToggle(...args: unknown[]): unknown
-    onOpenToggle: PropTypes.func.isRequired,
+};
-  }
 
-  constructor(props) {
+
-    super(props);
+export default class ModalExport extends React.Component<ModalExportProps> {
-  }
 
   tokenizedStyle () {
     return format(
@@ -88,11 +86,11 @@ export default class ModalExport extends React.Component {
     saveAs(blob, exportName + ".json");
   }
 
-  changeMetadataProperty(property, value) {
+  changeMetadataProperty(property: string, value: any) {
     const changedStyle = {
       ...this.props.mapStyle,
       metadata: {
-        ...this.props.mapStyle.metadata,
+        ...this.props.mapStyle.metadata as any,
         [property]: value
       }
     }
@@ -119,13 +117,13 @@ export default class ModalExport extends React.Component {
           <FieldString
             label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
             fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
-            value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+            value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
           />
           <FieldString
             label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
             fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
-            value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
+            value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
             onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
           />
         </div>

src/components/ModalSources.tsx

@@ -1,12 +1,10 @@
 import React from 'react'
-import PropTypes from 'prop-types'
+import {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, VectorSourceSpecification, latest} from '@maplibre/maplibre-gl-style-spec'
-import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Modal from './Modal'
 import InputButton from './InputButton'
-import Block from './Block'
 import FieldString from './FieldString'
 import FieldSelect from './FieldSelect'
-import ModalSourcesTypeEditor from './ModalSourcesTypeEditor'
+import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
 
 import style from '../libs/style'
 import { deleteSource, addSource, changeSource } from '../libs/source'
@@ -14,14 +12,14 @@ import publicSources from '../config/tilesets.json'
 
 import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
 
-class PublicSource extends React.Component {
+type PublicSourceProps = {
-  static propTypes = {
+  id: string
-    id: PropTypes.string.isRequired,
+  type: string
-    type: PropTypes.string.isRequired,
+  title: string
-    title: PropTypes.string.isRequired,
+  onSelect(...args: unknown[]): unknown
-    onSelect: PropTypes.func.isRequired,
+};
-  }
 
+class PublicSource extends React.Component<PublicSourceProps> {
   render() {
     return <div className="maputnik-public-source">
             <InputButton
@@ -39,7 +37,7 @@ class PublicSource extends React.Component {
   }
 }
 
-function editorMode(source) {
+function editorMode(source: SourceSpecification) {
   if(source.type === 'raster') {
     if(source.tiles) return 'tilexyz_raster'
     return 'tilejson_raster'
@@ -69,16 +67,15 @@ function editorMode(source) {
   return null
 }
 
-class ActiveModalSourcesTypeEditor extends React.Component {
+type ActiveModalSourcesTypeEditorProps = {
-  static propTypes = {
+  sourceId: string
-    sourceId: PropTypes.string.isRequired,
+  source: SourceSpecification
-    source: PropTypes.object.isRequired,
+  onDelete(...args: unknown[]): unknown
-    onDelete: PropTypes.func.isRequired,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+};
-  }
 
+class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTypeEditorProps> {
   render() {
-    const inputProps = { }
     return <div className="maputnik-active-source-type-editor">
       <div className="maputnik-active-source-type-editor-header">
         <span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
@@ -103,12 +100,18 @@ class ActiveModalSourcesTypeEditor extends React.Component {
   }
 }
 
-class AddSource extends React.Component {
+type AddSourceProps = {
-  static propTypes = {
+  onAdd(...args: unknown[]): unknown
-    onAdd: PropTypes.func.isRequired,
+};
-  }
 
-  constructor(props) {
+type AddSourceState = {
+  mode: EditorMode
+  sourceId: string
+  source: SourceSpecification
+};
+
+class AddSource extends React.Component<AddSourceProps, AddSourceState> {
+  constructor(props: AddSourceProps) {
     super(props)
     this.state = {
       mode: 'tilejson_vector',
@@ -117,7 +120,7 @@ class AddSource extends React.Component {
     }
   }
 
-  defaultSource(mode) {
+  defaultSource(mode: EditorMode): SourceSpecification {
     const source = (this.state || {}).source || {}
     const {protocol} = window.location;
 
@@ -128,38 +131,38 @@ class AddSource extends React.Component {
       }
       case 'geojson_json': return {
         type: 'geojson',
-        cluster: source.cluster || false,
+        cluster: (source as GeoJSONSourceSpecification).cluster || false,
         data: {}
       }
       case 'tilejson_vector': return {
         type: 'vector',
-        url: source.url || `${protocol}//localhost:3000/tilejson.json`
+        url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_vector': return {
         type: 'vector',
-        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+        tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-        minZoom: source.minzoom || 0,
+        minzoom: (source as VectorSourceSpecification).minzoom || 0,
-        maxZoom: source.maxzoom || 14
+        maxzoom: (source as VectorSourceSpecification).maxzoom || 14
       }
       case 'tilejson_raster': return {
         type: 'raster',
-        url: source.url || `${protocol}//localhost:3000/tilejson.json`
+        url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster': return {
         type: 'raster',
-        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+        tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-        minzoom: source.minzoom || 0,
+        minzoom: (source as RasterSourceSpecification).minzoom || 0,
-        maxzoom: source.maxzoom || 14
+        maxzoom: (source as RasterSourceSpecification).maxzoom || 14
       }
       case 'tilejson_raster-dem': return {
         type: 'raster-dem',
-        url: source.url || `${protocol}//localhost:3000/tilejson.json`
+        url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
       }
       case 'tilexyz_raster-dem': return {
         type: 'raster-dem',
-        tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
+        tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
-        minzoom: source.minzoom || 0,
+        minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
-        maxzoom: source.maxzoom || 14
+        maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
       }
       case 'image': return {
         type: 'image',
@@ -183,7 +186,7 @@ class AddSource extends React.Component {
           [0,0],
         ],
       }
-      default: return {}
+      default: return {} as any
     }
   }
 
@@ -192,7 +195,7 @@ class AddSource extends React.Component {
     this.props.onAdd(sourceId, source);
   }
 
-  onChangeSource = (source) => {
+  onChangeSource = (source: SourceSpecification) => {
     this.setState({source});
   }
 
@@ -213,7 +216,7 @@ class AddSource extends React.Component {
         label={"Source ID"}
         fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}
         value={this.state.sourceId}
-        onChange={v => this.setState({ sourceId: v})}
+        onChange={(v: string) => this.setState({ sourceId: v})}
       />
       <FieldSelect
         label={"Source Type"}
@@ -230,8 +233,8 @@ class AddSource extends React.Component {
           ['image', 'Image'],
           ['video', 'Video'],
         ]}
-        onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
+        onChange={(mode: EditorMode) => this.setState({mode: mode, source: this.defaultSource(mode)})}
-        value={this.state.mode}
+        value={this.state.mode as string}
       />
       <ModalSourcesTypeEditor
         onChange={this.onChangeSource}
@@ -248,15 +251,15 @@ class AddSource extends React.Component {
   }
 }
 
-export default class ModalSources extends React.Component {
+type ModalSourcesProps = {
-  static propTypes = {
+  mapStyle: StyleSpecification
-    mapStyle: PropTypes.object.isRequired,
+  isOpen: boolean
-    isOpen: PropTypes.bool.isRequired,
+  onOpenToggle(...args: unknown[]): unknown
-    onOpenToggle: PropTypes.func.isRequired,
+  onStyleChanged(...args: unknown[]): unknown
-    onStyleChanged: PropTypes.func.isRequired,
+};
-  }
 
-  stripTitle(source) {
+export default class ModalSources extends React.Component<ModalSourcesProps> {
+  stripTitle(source: SourceSpecification & {title?: string}): SourceSpecification {
     const strippedSource = {...source}
     delete strippedSource['title']
     return strippedSource
@@ -270,13 +273,13 @@ export default class ModalSources extends React.Component {
         key={sourceId}
         sourceId={sourceId}
         source={source}
-        onChange={src => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
+        onChange={(src: SourceSpecification) => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
         onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
       />
     })
 
-    const tilesetOptions = Object.keys(publicSources).filter(sourceId => !(sourceId in mapStyle.sources)).map(sourceId => {
+    const tilesetOptions = Object.keys(publicSources).filter((sourceId: string) => !(sourceId in mapStyle.sources)).map((sourceId: string) => {
-      const source = publicSources[sourceId]
+      const source = publicSources[sourceId as keyof typeof publicSources] as SourceSpecification & {title: string};
       return <PublicSource
         key={sourceId}
         id={sourceId}
@@ -286,7 +289,6 @@ export default class ModalSources extends React.Component {
       />
     })
 
-    const inputProps = { }
     return <Modal
       data-wd-key="modal:sources"
       isOpen={this.props.isOpen}
@@ -303,7 +305,7 @@ export default class ModalSources extends React.Component {
         <p>
           Add one of the publicly available sources to your style.
         </p>
-        <div className="maputnik-public-sources" style={{maxwidth: 500}}>
+        <div className="maputnik-public-sources" style={{maxWidth: 500}}>
         {tilesetOptions}
         </div>
       </section>
@@ -312,7 +314,7 @@ export default class ModalSources extends React.Component {
                 <h1>Add New Source</h1>
                 <p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
                 <AddSource
-					onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
+                    onAdd={(sourceId: string, source: SourceSpecification) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
                 />
       </section>
     </Modal>

src/components/ModalSourcesTypeEditor.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldUrl from './FieldUrl'
@@ -10,14 +9,18 @@ import FieldArray from './FieldArray'
 import FieldJson from './FieldJson'
 import FieldCheckbox from './FieldCheckbox'
 
+export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
 
-class TileJSONSourceEditor extends React.Component {
+type TileJSONSourceEditorProps = {
-  static propTypes = {
+  source: {
-    source: PropTypes.object.isRequired,
+    url: string
-    onChange: PropTypes.func.isRequired,
-    children: PropTypes.node,
   }
+  onChange(...args: unknown[]): unknown
+  children?: React.ReactNode
+};
 
+
+class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
   render() {
     return <div>
       <FieldUrl
@@ -34,14 +37,18 @@ class TileJSONSourceEditor extends React.Component {
   }
 }
 
-class TileURLSourceEditor extends React.Component {
+type TileURLSourceEditorProps = {
-  static propTypes = {
+  source: {
-    source: PropTypes.object.isRequired,
+    tiles: string[]
-    onChange: PropTypes.func.isRequired,
+    minzoom: number
-    children: PropTypes.node,
+    maxzoom: number
   }
+  onChange(...args: unknown[]): unknown
+  children?: React.ReactNode
+};
 
-  changeTileUrls(tiles) {
+class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
+  changeTileUrls(tiles: string[]) {
     this.props.onChange({
       ...this.props.source,
       tiles,
@@ -86,14 +93,17 @@ class TileURLSourceEditor extends React.Component {
   }
 }
 
-class ImageSourceEditor extends React.Component {
+type ImageSourceEditorProps = {
-  static propTypes = {
+  source: {
-    source: PropTypes.object.isRequired,
+    coordinates: [number, number][]
-    onChange: PropTypes.func.isRequired,
+    url: string
   }
+  onChange(...args: unknown[]): unknown
+};
 
+class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
   render() {
-    const changeCoord = (idx, val) => {
+    const changeCoord = (idx: number, val: [number, number]) => {
       const coordinates = this.props.source.coordinates.slice(0);
       coordinates[idx] = val;
 
@@ -122,7 +132,7 @@ class ImageSourceEditor extends React.Component {
             type="number"
             value={this.props.source.coordinates[idx]}
             default={[0, 0]}
-            onChange={(val) => changeCoord(idx, val)}
+            onChange={(val: [number, number]) => changeCoord(idx, val)}
           />
         );
       })}
@@ -130,14 +140,17 @@ class ImageSourceEditor extends React.Component {
   }
 }
 
-class VideoSourceEditor extends React.Component {
+type VideoSourceEditorProps = {
-  static propTypes = {
+  source: {
-    source: PropTypes.object.isRequired,
+    coordinates: [number, number][]
-    onChange: PropTypes.func.isRequired,
+    urls: string[]
   }
+  onChange(...args: unknown[]): unknown
+};
 
+class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
   render() {
-    const changeCoord = (idx, val) => {
+    const changeCoord = (idx: number, val: [number, number]) => {
       const coordinates = this.props.source.coordinates.slice(0);
       coordinates[idx] = val;
 
@@ -147,7 +160,7 @@ class VideoSourceEditor extends React.Component {
       });
     }
 
-    const changeUrls = (urls) => {
+    const changeUrls = (urls: string[]) => {
       this.props.onChange({
         ...this.props.source,
         urls,
@@ -160,7 +173,7 @@ class VideoSourceEditor extends React.Component {
         fieldSpec={latest.source_video.urls}
         type="string"
         value={this.props.source.urls}
-        default={""}
+        default={[]}
         onChange={changeUrls}
       />
       {["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
@@ -172,7 +185,7 @@ class VideoSourceEditor extends React.Component {
             type="number"
             value={this.props.source.coordinates[idx]}
             default={[0, 0]}
-            onChange={val => changeCoord(idx, val)}
+            onChange={(val: [number, number]) => changeCoord(idx, val)}
           />
         );
       })}
@@ -180,12 +193,14 @@ class VideoSourceEditor extends React.Component {
   }
 }
 
-class GeoJSONSourceUrlEditor extends React.Component {
+type GeoJSONSourceUrlEditorProps = {
-  static propTypes = {
+  source: {
-    source: PropTypes.object.isRequired,
+    data: string
-    onChange: PropTypes.func.isRequired,
   }
+  onChange(...args: unknown[]): unknown
+};
 
+class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps> {
   render() {
     return <FieldUrl
       label={"GeoJSON URL"}
@@ -199,12 +214,15 @@ class GeoJSONSourceUrlEditor extends React.Component {
   }
 }
 
-class GeoJSONSourceFieldJsonEditor extends React.Component {
+type GeoJSONSourceFieldJsonEditorProps = {
-  static propTypes = {
+  source: {
-    source: PropTypes.object.isRequired,
+    data: any,
-    onChange: PropTypes.func.isRequired,
+    cluster: boolean
   }
+  onChange(...args: unknown[]): unknown
+};
 
+class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJsonEditorProps> {
   render() {
     return <div>
       <Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
@@ -238,13 +256,13 @@ class GeoJSONSourceFieldJsonEditor extends React.Component {
   }
 }
 
-export default class ModalSourcesTypeEditor extends React.Component {
+type ModalSourcesTypeEditorProps = {
-  static propTypes = {
+  mode: EditorMode
-    mode: PropTypes.string.isRequired,
+  source: any
-    source: PropTypes.object.isRequired,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+};
-  }
 
+export default class ModalSourcesTypeEditor extends React.Component<ModalSourcesTypeEditorProps> {
   render() {
     const commonProps = {
       source: this.props.source,

src/components/SpecField.tsx

@@ -21,15 +21,13 @@ type SpecFieldProps = InputFieldSpecProps & {
 
 export default class SpecField extends React.Component<SpecFieldProps> {
   render() {
-    const {props} = this;
+    const fieldType = this.props.fieldSpec.type;
-
-    const fieldType = props.fieldSpec.type;
 
     const typeBlockFn = typeMap[fieldType];
 
     let TypeBlock;
     if (typeBlockFn) {
-      TypeBlock = typeBlockFn(props);
+      TypeBlock = typeBlockFn(this.props);
     }
     else {
       console.warn("No such type for '%s'", fieldType);
@@ -37,11 +35,11 @@ export default class SpecField extends React.Component<SpecFieldProps> {
     }
 
     return <TypeBlock
-      label={props.label}
+      label={this.props.label}
-      action={props.action}
+      action={this.props.action}
       fieldSpec={this.props.fieldSpec}
     >
-      <InputSpec {...props} />
+      <InputSpec {...this.props} />
     </TypeBlock>
   }
 }

src/components/_DeleteStopButton.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
 
-export default class DeleteStopButton extends React.Component {
+type DeleteStopButtonProps = {
-  static propTypes = {
+  onClick?(...args: unknown[]): unknown
-    onClick: PropTypes.func,
+};
-  }
 
+
+export default class DeleteStopButton extends React.Component<DeleteStopButtonProps> {
   render() {
     return <InputButton
       className="maputnik-delete-stop"

src/components/_FieldComment.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Block from './Block'
 import FieldString from './FieldString'
 
-export default class BlockComment extends React.Component {
+type BlockCommentProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+};
-  }
 
+export default class BlockComment extends React.Component<BlockCommentProps> {
   render() {
     const fieldSpec = {
       doc: "Comments for the current layer. This is non-standard and not in the spec."

src/components/_FieldFont.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import Block from './Block'
-import PropTypes from 'prop-types'
 import FieldAutocomplete from './FieldAutocomplete'
 
-export default class FieldFont extends React.Component {
+type FieldFontProps = {
-  static propTypes = {
+  value?: string[]
-    value: PropTypes.array,
+  default?: string[]
-    default: PropTypes.array,
+  fonts?: unknown[]
-    fonts: PropTypes.array,
+  style?: object
-    style: PropTypes.object,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  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
@@ -45,7 +45,7 @@ export default class FieldFont extends React.Component {
       >
         <FieldAutocomplete
           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>

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 FieldString from './FieldString'
 
-export default class BlockId extends React.Component {
+type BlockIdProps = {
-  static propTypes = {
+  value: string
-    value: PropTypes.string.isRequired,
+  wdKey: string
-    wdKey: PropTypes.string.isRequired,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+export default class BlockId extends React.Component<BlockIdProps> {
   render() {
     return <Block label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}

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 FieldNumber from './FieldNumber'
 
-export default class BlockMaxZoom extends React.Component {
+type BlockMaxZoomProps = {
-  static propTypes = {
+  value?: number
-    value: PropTypes.number,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+export default class BlockMaxZoom extends React.Component<BlockMaxZoomProps> {
   render() {
     return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
       error={this.props.error}

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 FieldNumber from './FieldNumber'
 
-export default class BlockMinZoom extends React.Component {
+type BlockMinZoomProps = {
-  static propTypes = {
+  value?: number
-    value: PropTypes.number,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+export default class BlockMinZoom extends React.Component<BlockMinZoomProps> {
   render() {
     return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
       error={this.props.error}

src/components/_FieldSource.tsx

@@ -1,19 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldAutocomplete from './FieldAutocomplete'
 
-export default class BlockSource extends React.Component {
+type BlockSourceProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  wdKey?: string
-    wdKey: PropTypes.string,
+  onChange?(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  sourceIds?: unknown[]
-    sourceIds: PropTypes.array,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+export default class BlockSource extends React.Component<BlockSourceProps> {
   static defaultProps = {
     onChange: () => {},
     sourceIds: [],
@@ -28,8 +27,8 @@ export default class BlockSource extends React.Component {
     >
       <FieldAutocomplete
         value={this.props.value}
-        onChange={this.props.onChange}
+        onChange={this.props.onChange!}
-        options={this.props.sourceIds.map(src => [src, src])}
+        options={this.props.sourceIds!.map(src => [src, src])}
       />
     </Block>
   }

src/components/_FieldSourceLayer.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 FieldAutocomplete from './FieldAutocomplete'
 
-export default class BlockSourceLayer extends React.Component {
+type BlockSourceLayerProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  onChange?(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  sourceLayerIds?: unknown[]
-    sourceLayerIds: PropTypes.array,
+  isFixed?: boolean
-    isFixed: PropTypes.bool,
+};
-  }
 
+export default class BlockSourceLayer extends React.Component<BlockSourceLayerProps> {
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
@@ -26,8 +25,8 @@ export default class BlockSourceLayer extends React.Component {
       <FieldAutocomplete
         keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
-        onChange={this.props.onChange}
+        onChange={this.props.onChange!}
-        options={this.props.sourceLayerIds.map(l => [l, l])}
+        options={this.props.sourceLayerIds!.map(l => [l, l])}
       />
     </Block>
   }

src/components/_FieldSymbol.jsx

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

src/components/_FieldSymbol.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import FieldAutocomplete from './FieldAutocomplete'
+
+
+type FieldSymbolProps = {
+  value?: string
+  icons?: unknown[]
+  onChange(...args: unknown[]): unknown
+};
+
+
+export default class FieldSymbol extends React.Component<FieldSymbolProps> {
+  static defaultProps = {
+    icons: []
+  }
+
+  render() {
+    return <FieldAutocomplete
+      value={this.props.value}
+      options={this.props.icons!.map(f => [f, f])}
+      onChange={this.props.onChange}
+    />
+  }
+}
+

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 FieldSelect from './FieldSelect'
 import FieldString from './FieldString'
 
-export default class BlockType extends React.Component {
+type BlockTypeProps = {
-  static propTypes = {
+  value: string
-    value: PropTypes.string.isRequired,
+  wdKey?: string
-    wdKey: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+  disabled?: boolean
-    disabled: PropTypes.bool,
+};
-  }
 
+export default class BlockType extends React.Component<BlockTypeProps> {
   static defaultProps = {
     disabled: false,
   }

src/components/_FunctionButtons.tsx

@@ -1,37 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import InputButton from './InputButton'
 import {MdFunctions, MdInsertChart} from 'react-icons/md'
 import {mdiFunctionVariant} from '@mdi/js';
 
+type FunctionInputButtonsProps = {
+  fieldSpec?: any
+  onZoomClick?(...args: unknown[]): unknown
+  onDataClick?(...args: unknown[]): unknown
+  onExpressionClick?(...args: unknown[]): unknown
+};
 
-/**
+export default class FunctionInputButtons extends React.Component<FunctionInputButtonsProps> {
- * So here we can't just check is `Array.isArray(value)` because certain
- * properties accept arrays as values, for example `text-font`. So we must try
- * and create an expression.
- */
-function isExpression(value, fieldSpec={}) {
-  if (!Array.isArray(value)) {
-    return false;
-  }
-  try {
-    expression.createExpression(value, fieldSpec);
-    return true;
-  }
-  catch (err) {
-    return false;
-  }
-}
-
-export default class FunctionInputButtons extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object,
-    onZoomClick: PropTypes.func,
-    onDataClick: PropTypes.func,
-    onExpressionClick: PropTypes.func,
-  }
-
   render() {
     let makeZoomInputButton, makeDataInputButton, expressionInputButton;
 

src/components/_SpecProperty.tsx

@@ -1,25 +1,24 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import SpecField from './SpecField'
 import FunctionButtons from './_FunctionButtons'
-import Block from './Block'
 
 import labelFromFieldName from './_labelFromFieldName'
 
 
-export default class SpecProperty extends React.Component {
+type SpecPropertyProps = {
-  static propTypes = {
+  onZoomClick(...args: unknown[]): unknown
-    onZoomClick: PropTypes.func.isRequired,
+  onDataClick(...args: unknown[]): unknown
-    onDataClick: PropTypes.func.isRequired,
+  fieldName?: string
-    fieldName: PropTypes.string,
+  fieldType?: string
-    fieldType: PropTypes.string,
+  fieldSpec?: any
-    fieldSpec: PropTypes.object,
+  value?: any
-    value: PropTypes.any,
+  errors?: unknown[]
-    errors: PropTypes.object,
+  onExpressionClick?(...args: unknown[]): unknown
-    onExpressionClick: PropTypes.func,
+};
-  }
 
+
+export default class SpecProperty extends React.Component<SpecPropertyProps> {
   static defaultProps = {
     errors: {},
   }
@@ -31,17 +30,16 @@ export default class SpecProperty extends React.Component {
       fieldSpec={this.props.fieldSpec}
       onZoomClick={this.props.onZoomClick}
       onDataClick={this.props.onDataClick} 
-      value={this.props.value}
       onExpressionClick={this.props.onExpressionClick} 
     />
 
-    const error = errors[fieldType+"."+fieldName];
+    const error = errors![fieldType+"."+fieldName as any] as any;
 
     return <SpecField
       {...this.props}
       error={error}
       fieldSpec={this.props.fieldSpec}
-      label={labelFromFieldName(this.props.fieldName)}
+      label={labelFromFieldName(this.props.fieldName || '')}
       action={functionBtn}
     />
   }

src/components/_labelFromFieldName.ts

@@ -1,6 +1,6 @@
 import capitalize from 'lodash.capitalize'
 
-export default function labelFromFieldName(fieldName) {
+export default function labelFromFieldName(fieldName: string) {
   let label;
   const parts = fieldName.split('-');
   if (parts.length > 1) {

src/libs/accessibility.ts

@@ -1,8 +1,8 @@
 import throttle from 'lodash.throttle'
 
-export default {
 // Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
-  reducedMotionEnabled: throttle(() => {
+const reducedMotionEnabled = throttle(() => {
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches
 }, 3000)
-}
+
+export { reducedMotionEnabled }