Remove legacy context API (#1258)

## Summary
- replace `childContextTypes` usage with `IconContext` providers
- drop `prop-types` imports

## Testing
- `npm run lint`
- `npm run build`


------
https://chatgpt.com/codex/tasks/task_e_6868431f6ecc83318393a5d079ca736e

CHANGELOG.md

@@ -12,6 +12,8 @@
 - Upgrade Vite 6 and Cypress 14 ([#970](https://github.com/maplibre/maputnik/pull/970))
 - Upgrade OpenLayers from v6 to v10
 - When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
+- Remove react-autobind dependency
+- Remove usage of legacy `childContextTypes` API
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes

package-lock.json

@@ -46,7 +46,6 @@
         "react-accessible-accordion": "^5.0.1",
         "react-aria-menubutton": "^7.0.3",
         "react-aria-modal": "^5.0.2",
-        "react-autobind": "^1.0.6",
         "react-autocomplete": "^1.8.1",
         "react-collapse": "^5.1.1",
         "react-color": "^2.19.3",
@@ -10772,11 +10771,6 @@
         "react-dom": ">=16.3.0"
       }
     },
-    "node_modules/react-autobind": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/react-autobind/-/react-autobind-1.0.6.tgz",
-      "integrity": "sha512-+BTreuQUUGv1Tv4GbcFNk+1L8U60ZSdxLUs3OVUPsShzxLFYcTYcNf2wzMt3GEU4iFA8Px7SpofpX+uiL03QyQ=="
-    },
     "node_modules/react-autocomplete": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/react-autocomplete/-/react-autocomplete-1.8.1.tgz",

package.json

@@ -60,7 +60,6 @@
     "react-accessible-accordion": "^5.0.1",
     "react-aria-menubutton": "^7.0.3",
     "react-aria-modal": "^5.0.2",
-    "react-autobind": "^1.0.6",
     "react-autocomplete": "^1.8.1",
     "react-collapse": "^5.1.1",
     "react-color": "^2.19.3",

src/components/App.tsx

@@ -1,5 +1,3 @@
-// @ts-ignore - this can be easily replaced with arrow functions
-import autoBind from 'react-autobind';
 import React from 'react'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
@@ -140,7 +138,6 @@ export default class App extends React.Component<any, AppState> {
 
   constructor(props: any) {
     super(props)
-    autoBind(this);
 
     this.revisionStore = new RevisionStore()
     const params = new URLSearchParams(window.location.search.substring(1))

src/components/AppLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
 import { WithTranslation, withTranslation } from 'react-i18next';
+import { IconContext } from 'react-icons';
 
 type AppLayoutInternalProps = {
   toolbar: React.ReactElement
@@ -13,20 +13,12 @@ type AppLayoutInternalProps = {
 } & WithTranslation;
 
 class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
 
   render() {
     document.body.dir = this.props.i18n.dir();
 
-    return <div className="maputnik-layout">
+    return <IconContext.Provider value={{size: '14px'}}>
+      <div className="maputnik-layout">
         {this.props.toolbar}
         <div className="maputnik-layout-main">
           <div className="maputnik-layout-list">
@@ -45,6 +37,7 @@ class AppLayoutInternal extends React.Component<AppLayoutInternalProps> {
         }
         {this.props.modals}
       </div>
+    </IconContext.Provider>
   }
 }
 

src/components/LayerEditor.tsx

@@ -1,8 +1,8 @@
 import React, {type JSX} from 'react'
-import PropTypes from 'prop-types'
 import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
 import {Accordion} from 'react-accessible-accordion';
 import {MdMoreVert} from 'react-icons/md'
+import { IconContext } from 'react-icons'
 import {BackgroundLayerSpecification, LayerSpecification, SourceSpecification} from 'maplibre-gl';
 
 import FieldJson from './FieldJson'
@@ -86,10 +86,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     onLayerDestroyed: () => {},
   }
 
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
   constructor(props: LayerEditorInternalProps) {
     super(props)
 
@@ -116,14 +112,6 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
     };
   }
 
-  getChildContext () {
-    return {
-      reactIconBase: {
-        size: 14,
-        color: '#8e8e8e',
-      }
-    }
-  }
 
   changeProperty(group: keyof LayerSpecification | null, property: string, newValue: any) {
     this.props.onLayerChanged(
@@ -311,7 +299,8 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
       items[id].handler();
     }
 
-    return <section className="maputnik-layer-editor"
+    return <IconContext.Provider value={{size: '14px', color: '#8e8e8e'}}>
+      <section className="maputnik-layer-editor"
         role="main"
         aria-label={t("Layer editor")}
       >
@@ -358,6 +347,7 @@ class LayerEditorInternal extends React.Component<LayerEditorInternalProps, Laye
           {groups}
         </Accordion>
       </section>
+    </IconContext.Provider>
   }
 }
 

src/components/LayerListItem.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 import {MdContentCopy, MdVisibility, MdVisibilityOff, MdDelete} from 'react-icons/md'
+import { IconContext } from 'react-icons'
 
 import IconLayer from './IconLayer'
 import {SortableElement, SortableHandle} from 'react-sortable-hoc'
@@ -91,20 +91,11 @@ class LayerListItem extends React.Component<LayerListItemProps> {
     onLayerVisibilityToggle: () => {},
   }
 
-  static childContextTypes = {
-    reactIconBase: PropTypes.object
-  }
-
-  getChildContext() {
-    return {
-      reactIconBase: { size: 14 }
-    }
-  }
-
   render() {
     const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
 
-    return <li
+    return <IconContext.Provider value={{size: '14px'}}>
+      <li
         id={this.props.id}
         key={this.props.layerId}
         onClick={_e => this.props.onLayerSelect(this.props.layerIndex)}
@@ -136,6 +127,7 @@ class LayerListItem extends React.Component<LayerListItemProps> {
           onClick={_e => this.props.onLayerVisibilityToggle!(this.props.layerIndex)}
         />
       </li>
+    </IconContext.Provider>
   }
 }