@xyo-network/react-map 3.0.1 → 3.0.3

package/src/Contexts/MapBoxInstance/Provider.tsx

@@ -1,6 +1,8 @@
-import { WithChildren } from '@xylabs/react-shared'
-import { Map } from 'mapbox-gl'
-import React, { useEffect, useMemo, useState } from 'react'
+import type { WithChildren } from '@xylabs/react-shared'
+import type { Map } from 'mapbox-gl'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { MapBoxInstanceContext } from './Context.ts'
 
@@ -8,7 +10,9 @@ export const MapBoxInstanceProvider: React.FC<WithChildren> = ({ children }) =>
   const [map, setMapBoxInstance] = useState<Map>()
   const [mapInitialized, setMapInitialized] = useState(false)
 
-  const value = useMemo(() => ({ map, mapInitialized, setMapBoxInstance }), [map, mapInitialized, setMapBoxInstance])
+  const value = useMemo(() => ({
+    map, mapInitialized, setMapBoxInstance,
+  }), [map, mapInitialized, setMapBoxInstance])
 
   useEffect(() => {
     if (!mapInitialized && map) {

package/src/Contexts/MapBoxInstance/State.ts

@@ -1,5 +1,5 @@
-import { Map } from 'mapbox-gl'
-import { Dispatch, SetStateAction } from 'react'
+import type { Map } from 'mapbox-gl'
+import type { Dispatch, SetStateAction } from 'react'
 
 export interface MapBoxInstanceState {
   map?: Map

package/src/Contexts/MapSettings/Context.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react'
 
-import { MapSettingsState } from './State.ts'
+import type { MapSettingsState } from './State.ts'
 
 const MapSettingsContext = createContext<MapSettingsState>({})
 

package/src/Contexts/MapSettings/Provider.tsx

@@ -1,11 +1,13 @@
-import { WithChildren } from '@xylabs/react-shared'
-import React, { useEffect, useMemo, useState } from 'react'
+import type { WithChildren } from '@xylabs/react-shared'
+import React, {
+  useEffect, useMemo, useState,
+} from 'react'
 
 import { MapSettings } from '../../MapBoxClasses/index.ts'
-import { MapSetting } from '../../Settings/index.ts'
+import type { MapSetting } from '../../Settings/index.ts'
 import { useMapBoxInstance } from '../MapBoxInstance/index.ts'
 import { MapSettingsContext } from './Context.ts'
-import { MapSettingsState } from './State.ts'
+import type { MapSettingsState } from './State.ts'
 
 export interface MapSettingsProviderProps {
   debugLayerName?: string
@@ -31,7 +33,9 @@ export const MapSettingsProvider: React.FC<WithChildren<MapSettingsProviderProps
 
   useEffect(() => {
     if (mapSettings && map && mapInitialized) {
-      MapSettings.updateSettings({ debugLayerName, map, requestLocation, settings: mapSettings, zoom })
+      MapSettings.updateSettings({
+        debugLayerName, map, requestLocation, settings: mapSettings, zoom,
+      })
     }
   }, [debugLayerName, map, mapInitialized, mapSettings, requestLocation, zoom])
 

package/src/Contexts/MapSettings/State.ts

@@ -1,6 +1,6 @@
-import { Dispatch } from 'react'
+import type { Dispatch } from 'react'
 
-import { MapSetting } from '../../Settings/index.ts'
+import type { MapSetting } from '../../Settings/index.ts'
 
 export interface MapSettingsState {
   mapSettings?: MapSetting

package/src/Contexts/MapboxAccessToken/Context.ts

@@ -1,5 +1,5 @@
 import { createContextEx } from '@xyo-network/react-shared'
 
-import { MapboxAccessTokenContextState } from './State.ts'
+import type { MapboxAccessTokenContextState } from './State.ts'
 
 export const MapboxAccessTokenContext = createContextEx<MapboxAccessTokenContextState>()

package/src/Contexts/MapboxAccessToken/Provider.tsx

@@ -1,5 +1,5 @@
-import { WithChildren } from '@xylabs/react-shared'
-import React, { useState } from 'react'
+import type { WithChildren } from '@xylabs/react-shared'
+import React, { useMemo, useState } from 'react'
 
 import { MapboxAccessTokenContext } from './Context.ts'
 
@@ -10,6 +10,14 @@ export interface MapboxAccessTokenProviderProps {
 export const MapboxAccessTokenProvider: React.FC<WithChildren<MapboxAccessTokenProviderProps>> = ({ defaultAccessToken, ...props }) => {
   const [accessToken, setAccessToken] = useState<string>()
 
-  // eslint-disable-next-line @eslint-react/no-unstable-context-value
-  return <MapboxAccessTokenContext.Provider value={{ accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken }} {...props} />
+  const value = useMemo(() => ({
+    accessToken: accessToken ?? defaultAccessToken, provided: true, setAccessToken,
+  }), [accessToken, defaultAccessToken, setAccessToken])
+
+  return (
+    <MapboxAccessTokenContext.Provider
+      value={value}
+      {...props}
+    />
+  )
 }

package/src/Contexts/MapboxAccessToken/State.ts

@@ -1,5 +1,5 @@
-import { ContextExState } from '@xyo-network/react-shared'
-import { Dispatch } from 'react'
+import type { ContextExState } from '@xyo-network/react-shared'
+import type { Dispatch } from 'react'
 
 export interface MapboxAccessTokenContextState extends ContextExState {
   accessToken?: string

package/src/Layers/Builders/LocationHeatMapLayerBuilder.ts

@@ -1,4 +1,6 @@
-import { HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig } from '../Configs/index.ts'
+import {
+  HeatMapFillLayerConfig, HeatMapLineLayerConfig, HeatMapSymbolLayerConfig,
+} from '../Configs/index.ts'
 import { FillLayerBuilder } from '../FillLayer.ts'
 import { LineLayerBuilder } from '../LineLayer.ts'
 import { SymbolLayerBuilder } from '../SymbolLayer.ts'

package/src/Layers/CircleLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { CircleLayerSpecification } from 'mapbox-gl'
+import type { CircleLayerSpecification } from 'mapbox-gl'
 
 export class CircleLayerBuilder extends LayerBase<CircleLayerSpecification> {
   CircleLayerOptions: Partial<CircleLayerSpecification>
@@ -9,7 +9,9 @@ export class CircleLayerBuilder extends LayerBase<CircleLayerSpecification> {
 
   constructor(id: string, source: string, CircleLayerOptions?: Partial<CircleLayerSpecification>) {
     super(id, source)
-    this.CircleLayerOptions = CircleLayerOptions || { id: this.id, source: this.source, type: 'circle' }
+    this.CircleLayerOptions = CircleLayerOptions || {
+      id: this.id, source: this.source, type: 'circle',
+    }
   }
 
   buildLayer(): CircleLayerSpecification {

package/src/Layers/Configs/HeatMapFillLayerConfig.ts

@@ -1,4 +1,4 @@
-import { FillLayerSpecification } from 'mapbox-gl'
+import type { FillLayerSpecification } from 'mapbox-gl'
 
 export const HeatMapFillLayerConfig: (color: string) => Partial<FillLayerSpecification> = color => ({
   paint: {

package/src/Layers/Configs/HeatMapLineLayerConfig.ts

@@ -1,4 +1,4 @@
-import { LineLayerSpecification } from 'mapbox-gl'
+import type { LineLayerSpecification } from 'mapbox-gl'
 
 export const HeatMapLineLayerConfig: (color: string) => Partial<LineLayerSpecification> = color => ({
   layout: {

package/src/Layers/Configs/HeatMapSymbolLayerConfig.ts

@@ -1,4 +1,4 @@
-import { SymbolLayerSpecification } from 'mapbox-gl'
+import type { SymbolLayerSpecification } from 'mapbox-gl'
 
 export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpecification> = color => ({
   layout: {
@@ -14,7 +14,5 @@ export const HeatMapSymbolLayerConfig: (color: string) => Partial<SymbolLayerSpe
     'text-size': 10,
     'visibility': 'none',
   },
-  paint: {
-    'text-color': color,
-  },
+  paint: { 'text-color': color },
 })

package/src/Layers/Configs/LocationPointLayerConfig.ts

@@ -1,4 +1,4 @@
-import { CircleLayerSpecification } from 'mapbox-gl'
+import type { CircleLayerSpecification } from 'mapbox-gl'
 
 export const LocationPointLayerConfig: (color: string, circleRadius: number, circleOpacity: number) => Partial<CircleLayerSpecification> = (
   color,

package/src/Layers/FillLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { FillLayerSpecification } from 'mapbox-gl'
+import type { FillLayerSpecification } from 'mapbox-gl'
 
 export class FillLayerBuilder extends LayerBase<FillLayerSpecification> {
   FillLayerOptions: Partial<FillLayerSpecification>

package/src/Layers/LineLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { LineLayerSpecification } from 'mapbox-gl'
+import type { LineLayerSpecification } from 'mapbox-gl'
 
 export class LineLayerBuilder extends LayerBase<LineLayerSpecification> {
   LineLayerOptions: Partial<LineLayerSpecification>

package/src/Layers/MapLayer.ts

@@ -1,5 +1,5 @@
-import { LayerBase } from '@xyo-network/sdk-geo'
-import { Layer, LayerSpecification } from 'mapbox-gl'
+import type { LayerBase } from '@xyo-network/sdk-geo'
+import type { Layer, LayerSpecification } from 'mapbox-gl'
 
 export interface MapLayer extends Layer {
   update: LayerBase<LayerSpecification>['update']

package/src/Layers/SymbolLayer.ts

@@ -1,5 +1,5 @@
 import { LayerBase } from '@xyo-network/sdk-geo'
-import { SymbolLayerSpecification } from 'mapbox-gl'
+import type { SymbolLayerSpecification } from 'mapbox-gl'
 
 export class SymbolLayerBuilder extends LayerBase<SymbolLayerSpecification> {
   SymbolLayerOptions: Partial<SymbolLayerSpecification>

package/src/MapBoxClasses/MapBase.ts

@@ -1,9 +1,9 @@
 import { assertEx } from '@xylabs/assert'
 import { GeoJson } from '@xyo-network/sdk-geo'
-import { Feature, Geometry } from 'geojson'
-import { GeoJSONSource, Map } from 'mapbox-gl'
+import type { Feature, Geometry } from 'geojson'
+import type { GeoJSONSource, Map } from 'mapbox-gl'
 
-import { MapLayer } from '../Layers/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
 
 export interface MapBaseConfig<T extends Geometry> {
   features: Feature<T>[]
@@ -16,7 +16,9 @@ export abstract class MapBase<T extends Geometry> {
   private _config: MapBaseConfig<T>
 
   constructor(config: MapBaseConfig<T>) {
-    this._config = { requestLocation: true, zoom: 2, ...config }
+    this._config = {
+      requestLocation: true, zoom: 2, ...config,
+    }
   }
 
   get isMapReady() {

package/src/MapBoxClasses/MapHeat.ts

@@ -2,11 +2,15 @@ import { assertEx } from '@xylabs/assert'
 import { delay } from '@xylabs/delay'
 import { forget } from '@xylabs/forget'
 import { GeoJson } from '@xyo-network/sdk-geo'
-import { Feature, Polygon } from 'geojson'
-import { GeoJSONSource, GeoJSONSourceSpecification, LngLatBounds, Map, MapOptions } from 'mapbox-gl'
-
-import { MapLayer } from '../Layers/index.ts'
-import { MapBase, MapBaseConfig } from './MapBase.ts'
+import type { Feature, Polygon } from 'geojson'
+import type {
+  GeoJSONSource, GeoJSONSourceSpecification, Map, MapOptions,
+} from 'mapbox-gl'
+import { LngLatBounds } from 'mapbox-gl'
+
+import type { MapLayer } from '../Layers/index.ts'
+import type { MapBaseConfig } from './MapBase.ts'
+import { MapBase } from './MapBase.ts'
 
 export class MapHeat extends MapBase<Polygon> {
   static animationStarted = false

package/src/MapBoxClasses/MapPoints.ts

@@ -1,7 +1,9 @@
-import { Feature, Point } from 'geojson'
-import { LngLatBounds, MapOptions } from 'mapbox-gl'
+import type { Feature, Point } from 'geojson'
+import type { MapOptions } from 'mapbox-gl'
+import { LngLatBounds } from 'mapbox-gl'
 
-import { MapBase, MapBaseConfig } from './MapBase.ts'
+import type { MapBaseConfig } from './MapBase.ts'
+import { MapBase } from './MapBase.ts'
 
 export interface MapPointsConfig extends MapBaseConfig<Point> {
   features: Feature<Point>[]

package/src/MapBoxClasses/MapSettings.ts

@@ -1,6 +1,9 @@
-import { GeolocateControl, Map, MapEventOf, MapEventType, NavigationControl } from 'mapbox-gl'
+import type {
+  Map, MapEventOf, MapEventType,
+} from 'mapbox-gl'
+import { GeolocateControl, NavigationControl } from 'mapbox-gl'
 
-import { MapSetting } from '../Settings/index.ts'
+import type { MapSetting } from '../Settings/index.ts'
 
 export interface MapSettingsConfig {
   debugLayerName?: string
@@ -75,8 +78,12 @@ export class MapSettings {
   }
 
   static updateSettings(config: MapSettingsConfig) {
-    const { settings, map, zoom, requestLocation, debugLayerName = '' } = config
-    const { scrollToZoom, enableControls, debugLayer, debugLogging } = settings
+    const {
+      settings, map, zoom, requestLocation, debugLayerName = '',
+    } = config
+    const {
+      scrollToZoom, enableControls, debugLayer, debugLogging,
+    } = settings
 
     MapSettings.toggleControls(enableControls?.value, map, zoom, requestLocation)
       .toggleScrollToZoom(scrollToZoom?.value, map)
@@ -87,18 +94,12 @@ export class MapSettings {
   // Needs to be static so we ensure controls are only instantiated once
   private static addControls(map: Map, zoom?: number, requestLocation?: boolean) {
     const geolocateControl = new GeolocateControl({
-      fitBoundsOptions: {
-        zoom: zoom || 2,
-      },
-      positionOptions: {
-        enableHighAccuracy: true,
-      },
+      fitBoundsOptions: { zoom: zoom || 2 },
+      positionOptions: { enableHighAccuracy: true },
       trackUserLocation: true,
     })
 
-    const navControl = new NavigationControl({
-      showCompass: false,
-    })
+    const navControl = new NavigationControl({ showCompass: false })
 
     this.geoLocateControl = this.geoLocateControl || geolocateControl
     this.navControl = this.navControl || navControl

package/src/Settings/DefaultMapSettings.ts

@@ -1,4 +1,4 @@
-import { MapSetting } from './MapSetting.ts'
+import type { MapSetting } from './MapSetting.ts'
 
 export const DefaultMapSettings: () => MapSetting = () => ({
   debugLayer: {

package/src/hooks/useDynamicMapResize.tsx

@@ -1,5 +1,8 @@
-import { Map } from 'mapbox-gl'
-import { MutableRefObject, useEffect, useMemo, useState } from 'react'
+import type { Map } from 'mapbox-gl'
+import type { MutableRefObject } from 'react'
+import {
+  useEffect, useMemo, useState,
+} from 'react'
 
 /**
  * Inspired by - https://bl.ocks.org/danswick/fc56f37c10d40be62e4feac5984250d2

package/src/hooks/useDynamicPositioning.tsx

@@ -1,5 +1,5 @@
 import { useWindowSize } from '@xylabs/react-shared'
-import { MapOptions } from 'mapbox-gl'
+import type { MapOptions } from 'mapbox-gl'
 import { useEffect, useState } from 'react'
 
 /**

package/src/hooks/useFindHashes.tsx

@@ -1,5 +1,6 @@
-import { Hash } from '@xylabs/hex'
-import { ArchivistPreset, useNetwork } from '@xyo-network/react-network'
+import type { Hash } from '@xylabs/hex'
+import type { ArchivistPreset } from '@xyo-network/react-network'
+import { useNetwork } from '@xyo-network/react-network'
 import { useMemo } from 'react'
 
 const animatedAnswerHashesConst: Hash[] = [

package/src/hooks/useHeatMapColors.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material'
 
-import { AnimatedHeatMapColorProps, ColorGradientLegendProps } from '../Colors/index.ts'
+import type { AnimatedHeatMapColorProps, ColorGradientLegendProps } from '../Colors/index.ts'
 
 const useHeatMapColors = () => {
   const theme = useTheme()

package/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -1,9 +1,9 @@
 import { exists } from '@xylabs/exists'
 import { GeoJson } from '@xyo-network/sdk-geo'
-import { Feature, Geometry } from 'geojson'
+import type { Feature, Geometry } from 'geojson'
 import { useEffect, useState } from 'react'
 
-import { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
+import type { NetworkLocationHeatmapQuadkeyAnswerPayload } from '../types/index.ts'
 
 const quadKeyToFeature = ({ density, quadkey }: { density: number; quadkey: string }) => {
   const polygonFeature = new GeoJson(quadkey).polygonFeature()
@@ -47,7 +47,9 @@ const useQuadKeyPayloadsToFeatures = (payloads?: NetworkLocationHeatmapQuadkeyAn
     }
   }, [payloads])
 
-  return { error, features, multipleFeatureSets }
+  return {
+    error, features, multipleFeatureSets,
+  }
 }
 
 export { useQuadKeyPayloadsToFeatures }

package/src/lib/MapBoxBaseProps.ts

@@ -1,9 +1,9 @@
-import { FlexBoxProps } from '@xylabs/react-flexbox'
-import { Feature } from 'geojson'
-import { MapOptions } from 'mapbox-gl'
-import { ReactNode } from 'react'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import type { Feature } from 'geojson'
+import type { MapOptions } from 'mapbox-gl'
+import type { ReactNode } from 'react'
 
-import { MapLayer } from '../Layers/index.ts'
+import type { MapLayer } from '../Layers/index.ts'
 
 export interface MapboxFlexBoxProps extends FlexBoxProps {
   accessToken: string

package/src/types/NetworkLocationAnswerBase.ts

@@ -1,5 +1,8 @@
-import { isPayloadOfSchemaType, Payload } from '@xyo-network/payload-model'
-import { Feature, Point, Polygon } from 'geojson'
+import type { Payload } from '@xyo-network/payload-model'
+import { isPayloadOfSchemaType } from '@xyo-network/payload-model'
+import type {
+  Feature, Point, Polygon,
+} from 'geojson'
 
 export interface NetworkLocationAnswerBase<T> {
   result: T

package/xy.config.ts

@@ -1,9 +1,7 @@
-import { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },