fix: yarn storybook errors

.eslintrc

@@ -1,10 +1,18 @@
 {
-    "parserOptions": { "project": ["./tsconfig.json"] },
-    "extends": ["react-app"],
-    "ignorePatterns": ["vite.config.*", "commitlint.config.js"],
-    "plugins": ["react"],
-    "rules": {
-        "import/exports-last": 0,
-        "no-lonely-if": 0
+  "parserOptions": { "project": ["./tsconfig.json"] },
+  "extends": ["react-app"],
+  "ignorePatterns": ["vite.config.*", "commitlint.config.js"],
+  "plugins": ["react"],
+  "rules": {
+    "import/exports-last": 0,
+    "no-lonely-if": 0
+  },
+  "overrides": [
+    {
+      "files": ["packages/react-components/**/*.{ts,tsx,js,jsx}"],
+      "rules": {
+        "react-hooks/exhaustive-deps": "off"
+      }
     }
+  ]
 }

packages/react-components/src/components/autocomplete/autocomplete.stories.tsx

@@ -1,35 +1,33 @@
-/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/prefer-regexp-exec, @typescript-eslint/no-magic-numbers*/
-import React from 'react';
 import type { StoryFn } from '@storybook/react';
 import { TextField } from '@map-colonies/react-core';
 import { CSFStory } from '../utils/story';
 
 import Autocomplete from './autocomplete';
 
 const meta = {
-  title: 'Autocomplete',
+  title: 'Components/Autocomplete',
   component: Autocomplete,
 };
 export default meta;
 
-export const AutocpmleteTextArea: CSFStory<JSX.Element> = () => (
+export const AutocompleteTextArea: CSFStory<JSX.Element> = () => (
   <>
-    <h1>Autocpmlete with native HTML TEXTAREA</h1>
+    <h1>Autocomplete with native HTML TEXTAREA</h1>
     <Autocomplete
       {...{
         options: ['apple', 'apricot', 'banana', 'bounty'],
       }}
     />
   </>
 );
-AutocpmleteTextArea.story = {
-  name: 'Autocpmlete with TEXTAREA HTML',
+AutocompleteTextArea.story = {
+  name: 'Autocomplete with TEXTAREA HTML',
 };
 
-export const AutocpmleteTextField: StoryFn = (args: Record<string, unknown>) => {
+export const AutocompleteTextField: StoryFn = (args: Record<string, unknown>) => {
   return (
     <>
-      <h1>Autocpmlete with TEXTFIELD react-core component</h1>
+      <h1>Autocomplete with TEXTFIELD react-core component</h1>
       <Autocomplete
         {...{
           Component: <TextField />,
@@ -43,8 +41,8 @@ export const AutocpmleteTextField: StoryFn = (args: Record<string, unknown>) =>
     </>
   );
 };
-AutocpmleteTextField.storyName = 'Autocpmlete with TEXTFIELD component';
-AutocpmleteTextField.argTypes = {
+AutocompleteTextField.storyName = 'Autocomplete with TEXTFIELD component';
+AutocompleteTextField.argTypes = {
   disabled: {
     defaultValue: false,
     control: {
@@ -65,10 +63,10 @@ AutocpmleteTextField.argTypes = {
   },
 };
 
-export const AutocpmleteInComplitionModeEN: StoryFn = (args: Record<string, unknown>) => {
+export const AutocompleteInCompletionModeEN: StoryFn = (args: Record<string, unknown>) => {
   return (
     <>
-      <h1>Autocpmlete with TEXTFIELD in AUTOCOMPLETE mode in English (LTR)</h1>
+      <h1>Autocomplete with TEXTFIELD in AUTOCOMPLETE mode in English (LTR)</h1>
       <Autocomplete
         {...{
           Component: <TextField />,
@@ -80,12 +78,12 @@ export const AutocpmleteInComplitionModeEN: StoryFn = (args: Record<string, unkn
     </>
   );
 };
-AutocpmleteInComplitionModeEN.storyName = 'Autocpmlete in autocomplete MODE RTL';
+AutocompleteInCompletionModeEN.storyName = 'Autocomplete in autocomplete MODE RTL';
 
-export const AutocpmleteInComplitionModeHEB: StoryFn = (args: Record<string, unknown>) => {
+export const AutocompleteInCompletionModeHEB: StoryFn = (args: Record<string, unknown>) => {
   return (
     <div style={{ direction: 'rtl' }}>
-      <h1>Autocpmlete with TEXTFIELD in AUTOCOMPLETE mode in Hebrew (RTL)</h1>
+      <h1>Autocomplete with TEXTFIELD in AUTOCOMPLETE mode in Hebrew (RTL)</h1>
       <Autocomplete
         {...{
           Component: <TextField />,
@@ -97,4 +95,4 @@ export const AutocpmleteInComplitionModeHEB: StoryFn = (args: Record<string, unk
     </div>
   );
 };
-AutocpmleteInComplitionModeHEB.storyName = 'Autocpmlete in autocomplete MODE LTR';
+AutocompleteInCompletionModeHEB.storyName = 'Autocomplete in autocomplete MODE LTR';

packages/react-components/src/components/cesium-map/active-layers/active-layers-panel.tsx

@@ -1,6 +1,6 @@
 import { Cesium3DTileset, Rectangle } from 'cesium';
 import { get } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Tooltip, Typography } from '@map-colonies/react-core';
 import bbox from '@turf/bbox';
 import { Box } from '../../box';
@@ -145,7 +145,7 @@ export const ActiveLayersPanel: React.FC<IActiveLayersPanelProps> = ({ locale })
     });
   };
 
-  const refreshSections = (): void => {
+  const refreshSections = useCallback((): void => {
     setSections([
       {
         id: IMAGERY,
@@ -164,7 +164,7 @@ export const ActiveLayersPanel: React.FC<IActiveLayersPanelProps> = ({ locale })
         values: get3DModels(),
       },
     ]);
-  };
+  }, []);
 
   useEffect(() => {
     refreshSections();

packages/react-components/src/components/cesium-map/base-map/base-map-widget.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { get } from 'lodash';
 import { IBaseMap, IBaseMaps, ITerrain } from '../map';
 import { CesiumIcon } from '../widget/cesium-icon';

packages/react-components/src/components/cesium-map/context-menu.stories.tsx

@@ -126,12 +126,10 @@ const ContextMenu: React.FC<IContextMenuData> = ({ data, position, style, handle
     top: `${position.y}px`,
   };
 
-  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     setPickedLayers(mapViewer.layersManager?.pickImageryLayers(position as CesiumCartesian2));
     console.log(mapViewer.layersManager?.pickImageryLayers(position as CesiumCartesian2));
   }, [position]);
-  /* eslint-enable react-hooks/exhaustive-deps */
 
   return (
     <>

packages/react-components/src/components/cesium-map/data-sources/drawings.data-source.tsx

@@ -118,7 +118,6 @@ export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> =
             break;
           default:
             throw new Error(`[CESIUM DRAW]: ${drawState.type} unrecognized primitive to draw.`);
-            break;
         }
       } else {
         // eslint-disable-next-line

packages/react-components/src/components/cesium-map/helpers/utils.ts

@@ -26,7 +26,6 @@ import area from '@turf/area';
 import bboxPolygon from '@turf/bbox-polygon';
 import centroid from '@turf/centroid';
 import { point } from '@turf/helpers';
-import * as turf from '@turf/helpers';
 import intersect from '@turf/intersect';
 import pointToPolygonDistance from '@turf/point-to-polygon-distance';
 import { ICesiumWFSLayerLabelingOptions } from '../layers';
@@ -404,7 +403,6 @@ export const defaultVisualizationHandler = (
         return [correctedCarto.longitude, correctedCarto.latitude, correctedCarto.height];
       });
 
-      // return turf.polygon(positions);
       return {
         type: 'Polygon',
         coordinates: [positions],

packages/react-components/src/components/cesium-map/layers/3d.tileset.with.update.tsx

@@ -37,7 +37,6 @@ export const Cesium3DTilesetWithUpdate: React.FC<ICesium3DTilesetWithUpdate> = (
     return () => {
       cancelled = true;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url]);
 
   useEffect(() => {

packages/react-components/src/components/cesium-map/layers/layers.rect.stories.tsx

@@ -1,5 +1,5 @@
 import { ImageryLayer, Rectangle } from 'cesium';
-import React, { useLayoutEffect, useMemo } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo } from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
 import bbox from '@turf/bbox';
 import { BASE_MAPS } from '../helpers/constants';
@@ -64,6 +64,17 @@ const layerMetaRectXYZ = {
   searchLayerPredicate: (layer: ImageryLayer): boolean => getImageryProviderUrl(layer) === optionsRectXYZ.url,
 };
 
+const layerRaster = {
+  id: '2_raster_ext',
+  type: 'XYZ_LAYER' as LayerType,
+  opacity: 1,
+  zIndex: 0,
+  show: true,
+  options: {
+    url: 'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
+  },
+};
+
 export const MapWithXYZLayersAndRect: StoryFn = () => (
   <div style={mapDivStyle}>
     <CesiumMap {...mapViewProps} layerManagerMetaMapping={layerManagerMetaMapping}>
@@ -75,21 +86,10 @@ export const MapWithXYZLayersAndRect: StoryFn = () => (
 MapWithXYZLayersAndRect.storyName = 'XYZ child layer with rect';
 
 export const MapWithSettings: StoryFn = () => {
-  const layer = {
-    id: '2_raster_ext',
-    type: 'XYZ_LAYER' as LayerType,
-    opacity: 1,
-    zIndex: 0,
-    show: true,
-    options: {
-      url: 'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
-    },
-  };
-
   return (
     <div style={mapDivStyle}>
       <CesiumMap {...mapViewProps} layerManagerMetaMapping={layerManagerMetaMapping}>
-        <LayerViewer layer={layer} />
+        <LayerViewer layer={layerRaster} />
       </CesiumMap>
     </div>
   );
@@ -105,9 +105,12 @@ const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
   const { layer } = props;
 
   // For testing the exposure of current zoom level on map viewer
-  setInterval(() => {
-    console.log('######################### Zoom level: ', (mapViewer as { currentZoomLevel?: number }).currentZoomLevel);
-  }, 2000);
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      console.log('######################### Zoom level: ', (mapViewer as { currentZoomLevel?: number }).currentZoomLevel);
+    }, 2000);
+    return () => window.clearInterval(interval);
+  }, [mapViewer]);
 
   // Mockin footprint data on layer meta
   const layerFootprint = useMemo(
@@ -132,6 +135,10 @@ const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
     layer.options.rectangle = layerManagerRect;
 
     mapViewer.layersManager?.addRasterLayer(layer, 0, '');
+
+    return () => {
+      mapViewer.layersManager?.removeLayer(layer.id);
+    };
   }, [mapViewer, layerFootprint, layer]);
 
   return <></>;

packages/react-components/src/components/cesium-map/layers/optimized-tile-requests.stories.tsx

@@ -106,7 +106,9 @@ const LayersContainer: React.FC = () => {
                 meta={{
                   id: 'Opaque Layer',
                   options: { ...optionsXYZOpaque },
-                  searchLayerPredicate: (layer: ImageryLayer): boolean => getImageryProviderUrl(layer) === optionsXYZOpaque.url,
+                  searchLayerPredicate: (layer: ImageryLayer): boolean => {
+                    return getImageryProviderUrl(layer) === optionsXYZOpaque.url;
+                  },
                 }}
                 rectangle={Rectangle.fromDegrees(...bbox(optionsXYZOpaque.footprint))}
                 options={optionsXYZOpaque}

packages/react-components/src/components/cesium-map/layers/wfs.layer.stories.tsx

@@ -283,6 +283,7 @@ const optionsPolygonParts = {
   labeling: {
     dataSourcePrefix: 'labels_',
     text: {
+      // eslint-disable-next-line no-template-curly-in-string
       pattern: '${imagingTimeEndUTC}\n v${productVersion} (${resolutionDegree})',
       fields: [
         {

packages/react-components/src/components/cesium-map/layers/wfs.layer.tsx

@@ -598,6 +598,7 @@ export const CesiumWFSLayer: React.FC<ICesiumWFSLayer> = (props) => {
             const queryName = payload.query.split('(')[0].replace('query ', ''); //strip queryName
             await handleWfsResponse((wfsResponse as any)?.data[queryName], extent, offset, position);
           } else {
+            // eslint-disable-next-line no-throw-literal
             throw 'API as alternative service still not supported';
           }
         } else {
@@ -690,11 +691,14 @@ export const CesiumWFSLayer: React.FC<ICesiumWFSLayer> = (props) => {
       hasRunFetchRef.current = true;
     }
 
+    const wfsCacheRef = wfsCache.current;
+    const fetchMetadataRef = fetchMetadata.current;
+
     // Cleanup
     return () => {
       if (get(mapViewer, '_cesiumWidget') !== undefined) {
-        wfsCache.current.clear();
-        fetchMetadata.current.clear();
+        wfsCacheRef.clear();
+        fetchMetadataRef.clear();
         mapViewer.dataSources.remove(mapViewer.dataSources.getByName(`${labeling?.dataSourcePrefix}${wfsDataSource.name}`)[0]);
         mapViewer.dataSources.remove(wfsDataSource, true);
         if (dataLayerId !== undefined) {

packages/react-components/src/components/cesium-map/legend/legend-item.tsx

@@ -23,11 +23,6 @@ export const LegendItem: React.FC<LegendItemProps> = ({ legend: { legendImg, leg
     window.open(legendImg, '_blank');
   }, [legendImg]);
 
-  const handleLegendDocOpen = useCallback(() => {
-    // Open doc in a new tab.
-    window.open(legendDoc, '_blank');
-  }, [legendDoc]);
-
   const renderLayerName = useCallback(() => {
     const MAX_LAYER_NAME_LENGTH = 15;
 

packages/react-components/src/components/cesium-map/legend/legend-list.tsx

@@ -26,7 +26,6 @@ export const LegendList: React.FC<LegendListProps> = ({ legends, actionsTexts: {
     if (!legends.length) {
       return handleNoLegends();
     }
-
     return legends.map((legend, i) => {
       return <LegendItem key={`${legend.layer as string}_${i}`} legend={legend} docText={docText} imgText={imgText} />;
     });

packages/react-components/src/components/cesium-map/map.stories.tsx

@@ -1,5 +1,5 @@
 import { Feature } from 'geojson';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
 import { ThemeProvider } from '@map-colonies/react-core';
 import { getValue } from '../utils/config';