Prettier changes

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

package.json

@@ -113,6 +113,7 @@
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.pick": "^4.4.6",
     "@types/mapbox__geo-viewport": "^0.4.1",
+    "@types/react-dom": "^18.0.0",
     "@types/react-lifecycles-compat": "^3.0.1",
     "@types/react-map-gl": "^6.1.2",
     "@types/react-modal": "^3.13.1",

src/components/geocoder-panel.tsx

@@ -25,7 +25,7 @@ import {FlyToInterpolator} from '@deck.gl/core';
 import KeplerGlSchema from 'schemas';
 import {getCenterAndZoomFromBounds} from 'utils/projection-utils';
 
-import Geocoder, { Result } from './geocoder/geocoder';
+import Geocoder, {Result} from './geocoder/geocoder';
 import {
   GEOCODER_DATASET_NAME,
   GEOCODER_LAYER_ID,

src/components/map/coordinate-info.js → src/components/map/coordinate-info.tsx

@@ -28,8 +28,13 @@ import {StyledLayerName} from './layer-hover-info';
 const DECIMAL = 6;
 const DECIMAL_Z = 1;
 
+interface CoordinateInfoProps {
+  coordinate: number[];
+  zoom: number;
+}
+
 const CoordinateInfoFactory = () => {
-  const CoordinateInfo = ({coordinate, zoom}) => (
+  const CoordinateInfo: React.FC<CoordinateInfoProps> = ({coordinate, zoom}) => (
     <div className="coordingate-hover-info">
       <StyledLayerName className="map-popover__layer-name">
         <CursorClick height="12px" />

src/components/map/layer-hover-info.js → src/components/map/layer-hover-info.tsx

@@ -51,8 +51,15 @@ const StyledTable = styled.table`
   }
 `;
 
+interface RowProps {
+  name: string;
+  value: string;
+  deltaValue?: string | null;
+  url?: string;
+}
+
 /** @type {import('./layer-hover-info').RowComponent} */
-const Row = ({name, value, deltaValue, url}) => {
+const Row: React.FC<RowProps> = ({name, value, deltaValue, url}) => {
   // Set 'url' to 'value' if it looks like a url
   if (!url && value && typeof value === 'string' && value.match(/^http/)) {
     url = value;

src/components/map/layer-selector-panel.js → src/components/map/layer-selector-panel.tsx

@@ -26,12 +26,27 @@ import {Layers} from '../common/icons';
 import MapLayerSelector from '../common/map-layer-selector';
 import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlPanelFactory from './map-control-panel';
+import {Layer} from 'layers';
+import {MapControls} from 'reducers';
 
 LayerSelectorPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory];
 
-function LayerSelectorPanelFactory(MapControlTooltip, MapControlPanel) {
+export type LayerSelectorPanelProps = {
+  onMapToggleLayer: (layerId: string) => void;
+  onToggleMapControl: (control: string) => void;
+  layers: ReadonlyArray<Layer>;
+  layersToRender: {[key: string]: boolean};
+  isSplit: boolean;
+  mapControls: MapControls;
+  readOnly: boolean;
+};
+
+function LayerSelectorPanelFactory(
+  MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
+  MapControlPanel: ReturnType<typeof MapControlPanelFactory>
+) {
   /** @type {import('./layer-selector-panel').LayerSelectorPanelComponent} */
-  const LayerSelectorPanel = ({
+  const LayerSelectorPanel: React.FC<LayerSelectorPanelProps> = ({
     onMapToggleLayer,
     onToggleMapControl,
     layers,
@@ -71,7 +86,7 @@ function LayerSelectorPanelFactory(MapControlTooltip, MapControlPanel) {
     );
 
     return isVisible ? (
-      (!isActive ? (
+      !isActive ? (
         <MapControlButton
           key={1}
           onClick={onToggleMenuPanel}
@@ -93,7 +108,7 @@ function LayerSelectorPanelFactory(MapControlTooltip, MapControlPanel) {
         >
           <MapLayerSelector layers={legendLayers} onMapToggleLayer={onMapToggleLayer} />
         </MapControlPanel>
-      ))
+      )
     ) : null;
   };
 

src/components/map/locale-panel.js → src/components/map/locale-panel.tsx

@@ -27,14 +27,26 @@ import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlToolbarFactory from './map-control-toolbar';
 import {FormattedMessage} from '../../localization';
 import TippyTooltip from 'components/common/tippy-tooltip';
+import {MapControls} from 'reducers';
 
 LocalePanelFactory.deps = [MapControlTooltipFactory, MapControlToolbarFactory];
 
-function LocalePanelFactory(MapControlTooltip, MapControlToolbar) {
+export type LocalePanelProps = {
+  availableLocales: ReadonlyArray<string>;
+  onSetLocale: (locale: string) => void;
+  locale: string;
+  onToggleMapControl: (control: string) => void;
+  mapControls: MapControls;
+};
+
+function LocalePanelFactory(
+  MapControlTooltip: ReturnType<typeof MapControlTooltipFactory>,
+  MapControlToolbar: ReturnType<typeof MapControlToolbarFactory>
+) {
   /** @type {import('./locale-panel').LocalePanelComponent} */
-  const LocalePanel = React.memo(
+  const LocalePanel: React.FC<LocalePanelProps> = React.memo(
     ({availableLocales, onToggleMapControl, onSetLocale, locale: currentLocal, mapControls}) => {
-      const {active: isActive, disableClose, show} = mapControls.mapLocale || {};
+      const {active: isActive, show} = mapControls.mapLocale || {};
 
       const onClickItem = useCallback(
         locale => {
@@ -81,7 +93,6 @@ function LocalePanelFactory(MapControlTooltip, MapControlToolbar) {
               className={classnames('map-control-button', 'map-locale', {isActive})}
               onClick={onClickButton}
               active={isActive}
-              disableClose={disableClose}
             >
               <span className="map-control-button__locale">{currentLocal.toUpperCase()}</span>
             </MapControlButton>

src/components/map/map-control-panel.js → src/components/map/map-control-panel.tsx

@@ -74,9 +74,20 @@ const StyledIcon = styled(IconRoundSmall)`
   }
 `;
 
+export type MapControlPanelProps = {
+  header?: string;
+  scale?: number;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+  onPinClick?: React.MouseEventHandler<HTMLDivElement>;
+  pinnable?: boolean;
+  disableClose?: boolean;
+  isExport?: boolean;
+  logoComponent?: Element;
+};
+
 function MapControlPanelFactory() {
   /** @type {import('./map-control-panel').MapControlPanelComponent} */
-  const MapControlPanel = React.memo(
+  const MapControlPanel: React.FC<MapControlPanelProps> = React.memo(
     ({
       children,
       header,

src/components/map/map-control-tooltip.js → src/components/map/map-control-tooltip.tsx

@@ -22,9 +22,14 @@ import React from 'react';
 import {Tooltip} from 'components/common/styled-components';
 import {FormattedMessage} from 'localization';
 
+export type MapControlTooltipProps = {
+  id: string;
+  message: string;
+};
+
 function MapControlTooltipFactory() {
   /** @type {import('./map-control-tooltip').MapControlTooltipComponent} */
-  const MapControlTooltip = React.memo(({id, message}) => (
+  const MapControlTooltip: React.FC<MapControlTooltipProps> = React.memo(({id, message}) => (
     <Tooltip id={id} place="left" effect="solid">
       <span>
         <FormattedMessage id={message} />

src/components/map/map-control.js → src/components/map/map-control.tsx

@@ -29,8 +29,14 @@ import LayerSelectorPanelFactory from './layer-selector-panel';
 import MapLegendPanelFactory from './map-legend-panel';
 import MapDrawPanelFactory from './map-draw-panel';
 import LocalePanelFactory from './locale-panel';
+import {Datasets, Editor, MapControls} from 'reducers';
+import {Layer} from 'layers';
 
-const StyledMapControl = styled.div`
+interface StyledMapControlProps {
+  top?: number;
+}
+
+const StyledMapControl = styled.div<StyledMapControlProps>`
   right: 0;
   padding: ${props => props.theme.mapControl.padding}px;
   z-index: 10;
@@ -48,6 +54,35 @@ const StyledMapControl = styled.div`
 
 const LegendLogo = <KeplerGlLogo version={false} appName="kepler.gl" />;
 
+export type MapControlProps = {
+  availableLocales: ReadonlyArray<string>;
+  datasets: Datasets;
+  dragRotate: boolean;
+  isSplit: boolean;
+  primary: boolean;
+  layers: Layer[];
+  layersToRender: {[key: string]: boolean};
+  mapIndex: number;
+  mapControls: MapControls;
+  onTogglePerspective: () => void;
+  onToggleSplitMap: () => void;
+  onToggleMapControl: (control: string) => void;
+  onSetEditorMode: (mode: string) => void;
+  onToggleEditorVisibility: () => void;
+  top: number;
+  onSetLocale: () => void;
+  locale: string;
+  logoComponent: React.FC | React.ReactNode;
+
+  // optional
+  readOnly?: boolean;
+  scale?: number;
+  mapLayers?: {[key: string]: boolean};
+  editor: Editor;
+  actionComponents: React.FC[] | React.Component[];
+  mapHeight?: number;
+};
+
 MapControlFactory.deps = [
   MapDrawPanelFactory,
   Toggle3dButtonFactory,
@@ -58,12 +93,12 @@ MapControlFactory.deps = [
 ];
 
 function MapControlFactory(
-  MapDrawPanel,
-  Toggle3dButton,
-  SplitMapButton,
-  MapLegendPanel,
-  LayerSelectorPanel,
-  LocalePanel
+  MapDrawPanel: ReturnType<typeof MapDrawPanelFactory>,
+  Toggle3dButton: ReturnType<typeof Toggle3dButtonFactory>,
+  SplitMapButton: ReturnType<typeof SplitMapButtonFactory>,
+  MapLegendPanel: ReturnType<typeof MapLegendPanelFactory>,
+  LayerSelectorPanel: ReturnType<typeof LayerSelectorPanelFactory>,
+  LocalePanel: ReturnType<typeof LocalePanelFactory>
 ) {
   const DEFAULT_ACTIONS = [
     SplitMapButton,
@@ -75,7 +110,10 @@ function MapControlFactory(
   ];
 
   /** @type {import('./map-control').MapControl} */
-  const MapControl = ({actionComponents = DEFAULT_ACTIONS, ...props}) => {
+  const MapControl: React.FC<MapControlProps> = ({
+    actionComponents = DEFAULT_ACTIONS,
+    ...props
+  }) => {
     return (
       <StyledMapControl className="map-control" top={props.top}>
         {actionComponents.map((ActionComponent, index) => (