@mapcomponents/react-maplibre 0.1.66 → 0.1.68

package/src/components/MlThreeJsLayer/MlThreejsLayer.tsx

@@ -0,0 +1,228 @@
+import React, { useContext, useRef, useEffect, useState } from 'react';
+import MapContext from '../../contexts/MapContext';
+
+import Button from '@mui/material/Button';
+import maplibregl, { CustomLayerInterface, LngLatLike, Map } from 'maplibre-gl';
+import * as THREE from 'three';
+import GLTFLoader from './lib/GLTFLoader';
+import PropTypes from 'prop-types';
+import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
+
+/**
+ * Renders obj or gltf 3D Models on the MapLibreMap referenced by props.mapId
+ *
+ * @component
+ */
+
+export interface MlThreeJsLayerProps {
+	mapId?: string;
+	init?: object;
+	onDone?: () => void;
+}
+
+const MlThreeJsLayer = (props: MlThreeJsLayerProps) => {
+	const mapContext = useContext(MapContext);
+
+	const layerName = '3d-model';
+	const [showLayer, setShowLayer] = useState(true);
+	const showLayerRef = useRef(true);
+	const initializedRef = useRef(false);
+	const mapRef = useRef<MapLibreGlWrapper>();
+	const initFuncRef = useRef(props.init);
+
+	const cleanup = () => {
+		if (mapRef.current && mapRef.current.style) {
+			if (mapRef.current.getLayer(layerName)) {
+				mapRef.current.removeLayer(layerName);
+			}
+			mapRef.current = undefined;
+		}
+	};
+
+	useEffect(() => {
+		if (typeof initFuncRef.current === 'function') {
+			initFuncRef.current();
+		}
+
+		return cleanup;
+	}, []);
+
+	useEffect(() => {
+		if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+
+		initializedRef.current = true;
+		mapRef.current = mapContext.getMap(props.mapId);
+
+		mapRef.current?.setCenter([7.099771581806502, 50.73395746209983]);
+		mapRef.current?.setZoom(15);
+		mapRef.current?.setPitch(45);
+
+		// parameters to ensure the model is georeferenced correctly on the map
+		const modelOrigin = [7.099771581806502, 50.73395746209983];
+		// 50.73395746209983, 7.099771581806502
+		const modelAltitude = 0;
+		const modelRotate = [Math.PI / 2, 90, 0];
+
+		const modelAsMercatorCoordinate = maplibregl.MercatorCoordinate.fromLngLat(
+			modelOrigin as LngLatLike,
+			modelAltitude
+		);
+
+		// transformation parameters to position, rotate and scale the 3D model onto the map
+		const modelTransform = {
+			translateX: modelAsMercatorCoordinate.x + 0.0000008,
+			translateY: modelAsMercatorCoordinate.y + 0.0000018,
+			translateZ: modelAsMercatorCoordinate.z,
+			rotateX: modelRotate[0],
+			rotateY: modelRotate[1],
+			rotateZ: modelRotate[2],
+			/* Since our 3D model is in real world meters, a scale transform needs to be
+			 * applied since the CustomLayerInterface expects units in MercatorCoordinates.
+			 */
+			scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() + 0.00000003,
+		};
+
+		//var THREE = window.THREE;
+
+		// configuration of the custom layer for a 3D model per the CustomLayerInterface
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		const customLayer: CustomLayerInterface & {
+			camera: THREE.Camera | undefined;
+			scene: THREE.Scene | undefined;
+			map: Map;
+			renderer: THREE.WebGLRenderer;
+		} = {
+			id: '3d-model',
+			type: 'custom',
+			renderingMode: '3d',
+			camera: undefined,
+			scene: undefined,
+			onAdd: function (map: Map, gl: WebGL2RenderingContext) {
+				// eslint-disable-next-line @typescript-eslint/no-this-alias
+				const self = this;
+				this.camera = new THREE.Camera();
+				this.scene = new THREE.Scene();
+
+				// create two three.js lights to illuminate the model
+				const directionalLight = new THREE.DirectionalLight(0xffffff);
+				directionalLight.position.set(0, -70, 100).normalize();
+				this.scene.add(directionalLight);
+
+				const directionalLight2 = new THREE.DirectionalLight(0xffffff);
+				directionalLight2.position.set(0, 70, 100).normalize();
+				this.scene.add(directionalLight2);
+
+				// use the three.js GLTF loader to add the 3D model to the three.js scene
+				const loader = new GLTFLoader();
+				loader.load(
+					'assets/3D/godzilla_simple.glb',
+					//"https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf",
+					function (gltf: { scene: THREE.Scene }) {
+						self.scene?.add(gltf.scene);
+						if (typeof props.onDone === 'function') {
+							props.onDone();
+						}
+					}.bind(this)
+				);
+				this.map = map;
+
+				// use the Mapbox GL JS map canvas for three.js
+				this.renderer = new THREE.WebGLRenderer({
+					canvas: map.getCanvas(),
+					context: gl,
+					antialias: true,
+				});
+
+				this.renderer.autoClear = false;
+			},
+			render: function (_gl, matrix) {
+				const rotationX = new THREE.Matrix4().makeRotationAxis(
+					new THREE.Vector3(1, 0, 0),
+					modelTransform.rotateX
+				);
+				const rotationY = new THREE.Matrix4().makeRotationAxis(
+					new THREE.Vector3(0, 1, 0),
+					modelTransform.rotateY
+				);
+				const rotationZ = new THREE.Matrix4().makeRotationAxis(
+					new THREE.Vector3(0, 0, 1),
+					modelTransform.rotateZ
+				);
+
+				const m = new THREE.Matrix4().fromArray(matrix);
+				const l = new THREE.Matrix4()
+					.makeTranslation(
+						modelTransform.translateX,
+						modelTransform.translateY,
+						modelTransform.translateZ
+					)
+					.scale(
+						new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)
+					)
+					.multiply(rotationX)
+					.multiply(rotationY)
+					.multiply(rotationZ);
+
+				if (this.camera && this.scene) {
+					this.camera.projectionMatrix = m.multiply(l);
+					this.renderer.resetState();
+					this.renderer.render(this.scene, this.camera);
+					this.map.triggerRepaint();
+				}
+			},
+		};
+
+		mapRef.current?.addLayer(customLayer);
+
+		if (mapRef.current?.getLayer(layerName)) {
+			mapRef.current.setLayoutProperty(layerName, 'visibility', 'visible');
+		}
+	}, [mapContext.mapIds, mapContext, props]);
+
+	useEffect(() => {
+		if (!mapRef.current) return;
+
+		if (mapRef.current.getLayer(layerName)) {
+			// toggle layer visibility by changing the layout object's visibility property
+			if (showLayer) {
+				mapRef.current.setLayoutProperty(layerName, 'visibility', 'visible');
+			} else {
+				mapRef.current.setLayoutProperty(layerName, 'visibility', 'none');
+			}
+		}
+		//
+	}, [showLayer, mapContext]);
+
+	return (
+		<>
+			<Button
+				color="primary"
+				variant={showLayer ? 'contained' : 'outlined'}
+				onClick={() => {
+					setShowLayer(!showLayer);
+					showLayerRef.current = !showLayer;
+				}}
+			>
+				3D
+			</Button>
+		</>
+	);
+};
+
+MlThreeJsLayer.propTypes = {
+	/**
+	 * Id of the target MapLibre instance in mapContext
+	 */
+	mapId: PropTypes.string,
+	/**
+	 * function that gets called when initialized
+	 */
+	init: PropTypes.func,
+	/**
+	 * function that gets called when models are loaded
+	 */
+	onDone: PropTypes.func,
+};
+
+export default MlThreeJsLayer;

package/src/components/MlVectorTileLayer/MlVectorTileLayer.tsx

@@ -1,9 +1,9 @@
-import React, { useRef, useEffect, useCallback } from "react";
+import React, { useRef, useEffect, useCallback } from 'react';
 import useMap from '../../hooks/useMap';
 import { LayerSpecification } from 'maplibre-gl';
 import { VectorSourceSpecification } from 'maplibre-gl';
 
-interface MlVectorTileLayerProps {
+export type MlVectorTileLayerProps = {
 	mapId?: string;
 	insertBeforeLayer?: string;
 	layerId?: string;
@@ -29,6 +29,8 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 	const layerLayoutConfsRef = useRef({});
 	const initializedRef = useRef(false);
 
+	console.log('render vt')
+	console.log(props.layers)
 	const createLayers = useCallback(() => {
 		if (!mapHook.map) return;
 
@@ -43,8 +45,10 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
 			layerId.current,
 			{
 				type: 'vector',
-				tiles: [props.url || ""],
+				tiles: [props.url || ''],
 				attribution: '',
+				minzoom: 0,
+				maxzoom: 14,
 				...props.sourceOptions,
 			},
 			mapHook.componentId

package/src/components/MlWmsLoader/MlWmsLoader.stories.tsx

@@ -46,25 +46,17 @@ const Template = (props: MlWmsLoaderStoryProps) => {
 			<MlWmsLoaderInstructions open={guide} />
 			<WMSLinks open={demoMode} close={() => setDemoMode(false)} load={loader} />
 			<TopToolbar appBarStyle={{ zIndex: 1220 }}>
-				<Button
-					variant="contained"
-					onClick={openGuide}
-					sx={{ marginRight: '10px' }}
-				>
+				<Button variant="contained" onClick={openGuide} sx={{ marginRight: '10px' }}>
 					Guide me through
 				</Button>
-				<Button
-					variant="contained"
-					onClick={() => setDemoMode(!demoMode)}
-					
-				>
+				<Button variant="contained" onClick={() => setDemoMode(!demoMode)}>
 					Demo WMS
 				</Button>
 			</TopToolbar>
 
 			{!mediaIsMobile || (mediaIsMobile && !demoMode) ? (
 				<Sidebar
-					drawerPaperProps={{ sx: { top: '65px', maxWidth: '20%', padding: '40px' } }}
+					drawerPaperProps={{ sx: { top: '64px', maxWidth: '20%', padding: '40px' } }}
 					drawerButtonStyle={{ top: '65px' }}
 					sx={{ wordBreak: 'break-word' }}
 				>

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, useCallback, useState, useMemo } from 'react';
 
-import MapContext from '../../contexts/MapContext';
+import MapContext, { MapContextType } from '../../contexts/MapContext';
 import { v4 as uuidv4 } from 'uuid';
 
 import MlWmsLayer from '../MlWmsLayer/MlWmsLayer';
@@ -13,7 +13,7 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import IconButton from '@mui/material/IconButton';
-import { LngLat } from 'maplibre-gl';
+import { LngLat,  MapMouseEvent } from 'maplibre-gl';
 import MapLibreGlWrapper from '../MapLibreMap/lib/MapLibreGlWrapper';
 import { Layer2, Layer3 } from 'wms-capabilities';
 import { useWmsReturnType } from '../../hooks/useWms';
@@ -117,7 +117,8 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 	}, [layers]);
 
 	const getFeatureInfo = useCallback(
-		(ev) => {
+		// eslint-disable-next-line @typescript-eslint/ban-types
+		(ev:(MapMouseEvent & Object)) => {
 			if (!mapRef.current) return;
 			setFeatureInfoLngLat(undefined);
 			setFeatureInfoContent(undefined);
@@ -190,7 +191,9 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 
 		const _getFeatureInfo = getFeatureInfo;
 
-		mapRef.current.on('click', _getFeatureInfo, componentId.current);
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore: ts appears not to consider overloads
+		mapRef.current.map.on('click', _getFeatureInfo, componentId.current);
 		return () => {
 			mapRef.current?.map.off?.('click', _getFeatureInfo);
 		};

package/src/components/MlWmsLoader/utils/MlWmsLoaderInstructions.tsx

@@ -12,7 +12,7 @@ const steps = [
 			iconTransform: 'rotate(90deg)',
 			iconMarginTop: '-210px',
 			iconMarginLeft: '200px',
-			zIndex: 1210
+			zIndex: 1210,
 		},
 		content: (
 			<>
@@ -31,7 +31,7 @@ const steps = [
 			iconTransform: 'rotate(90deg)',
 			iconMarginTop: '-125px',
 			iconMarginLeft: '280px',
-			zIndex: 1210
+			zIndex: 1210,
 		},
 		content: (
 			<>

package/src/components/MlWmsLoader/utils/WMSLinks.tsx

@@ -111,7 +111,7 @@ export default function WMSLinks(props: wmsLinksProps) {
 								</Grid>
 								<Grid item xs={2}>
 									<Button onClick={props.close}>
-										<CloseIcon sx={{ color: 'black' }} />
+										<CloseIcon sx={{ color: 'text.primary' }} />
 									</Button>
 								</Grid>
 							</Grid>

package/src/contexts/MapContext.tsx

@@ -1,8 +1,20 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, ReactNode } from 'react';
 import MapLibreGlWrapper from '../components/MapLibreMap/lib/MapLibreGlWrapper';
 
-const MapContext = React.createContext({} as MapContextType);
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
+export interface MapContextType {
+	mapIds: string[];
+	mapExists: (map_id: string | undefined) => boolean;
+	maps: MapLibreGlWrapper[];
+	map: MapLibreGlWrapper | undefined;
+	getMap: (map_id: string | undefined) => MapLibreGlWrapper;
+	setMap: (map: MapLibreGlWrapper) => void;
+	removeMap: (map_id: string | undefined) => void;
+	registerMap: (map_id: string | undefined, map: MapLibreGlWrapper) => void;
+}
+const MapContext = React.createContext({} as MapContextType);
 
 /**
  * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
@@ -11,19 +23,18 @@ MapComponentsProvider must be used one level higher than the first use of MapCon
  * MapComponentsProvider requires at least one use of the MapLibreMap component somewhere down the component tree that will create the MapLibre-gl object and set the reference at MapContext.map. For MapLibre maps it is a good idea to provide a mapId attribute to the MapLibreMap Component even if you are only using a single map instance at start. It will make a later transition to using multiple instances within the same project much easier.
  */
 
-const MapComponentsProvider = ({ children }:{children:any}) => {
-	const [map, setMap] = useState<(MapLibreGlWrapper | undefined)>(undefined);
+const MapComponentsProvider = ({ children }: { children: ReactNode }) => {
+	const [map, setMap] = useState<MapLibreGlWrapper | undefined>(undefined);
 	const [mapIds, setMapIds] = useState<[...string[]]>([]);
-	let mapIds_raw = useRef<[...string[]]>([]);
-	let maps = useRef<any>({});
+	const mapIds_raw = useRef<[...string[]]>([]);
+	const maps = useRef<{ [key: string]: MapLibreGlWrapper }>({});
 
-
-	const removeMap = (mapId:string) => {
+	const removeMap = (mapId: string) => {
 		if (mapId) {
-			if (typeof maps.current[mapId] !== "undefined") {
+			if (typeof maps.current[mapId] !== 'undefined') {
 				delete maps.current[mapId];
 			}
-			let mapIdIndex = mapIds_raw.current.indexOf(mapId);
+			const mapIdIndex = mapIds_raw.current.indexOf(mapId);
 			if (mapIdIndex > -1) {
 				mapIds_raw.current.splice(mapIdIndex, 1);
 			}
@@ -34,15 +45,15 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 			}
 		} else {
 			setMap(undefined);
-			removeMap("anonymous_map");
+			removeMap('anonymous_map');
 		}
 	};
 
-	const setMapHandler = (mapInstance:MapLibreGlWrapper) => {
+	const setMapHandler = (mapInstance: MapLibreGlWrapper) => {
 		setMap(mapInstance);
 
 		if (mapIds.length === 0) {
-			let mapId = "anonymous_map";
+			const mapId = 'anonymous_map';
 			setMapIds([...mapIds, mapId]);
 			maps.current[mapId] = mapInstance;
 		}
@@ -53,7 +64,7 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 		setMap: setMapHandler,
 		maps: maps.current,
 		mapIds: mapIds,
-		registerMap: (mapId:string, mapInstance:MapLibreGlWrapper) => {
+		registerMap: (mapId: string, mapInstance: MapLibreGlWrapper) => {
 			if (mapId && mapInstance) {
 				maps.current[mapId] = mapInstance;
 				mapIds_raw.current.push(mapId);
@@ -65,7 +76,7 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 			}
 		},
 		removeMap,
-		mapExists: (mapId:string) => {
+		mapExists: (mapId: string) => {
 			if (mapId && Object.keys(maps.current).indexOf(mapId) === -1) {
 				return false;
 			} else if (!mapId && !map) {
@@ -73,7 +84,7 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 			}
 			return true;
 		},
-		getMap: (mapId:string):(MapLibreGlWrapper | null) => {
+		getMap: (mapId: string): MapLibreGlWrapper | null => {
 			if (mapId && mapIds.indexOf(mapId) !== -1) {
 				return maps.current[mapId];
 			} else if (!mapId && map) {
@@ -82,11 +93,14 @@ const MapComponentsProvider = ({ children }:{children:any}) => {
 
 			return null;
 		},
-	};
+	} as unknown as MapContextType;
 
-	//@ts-ignore
-	return <MapContext.Provider value={value}>{children}</MapContext.Provider>;
+	return (
+		<MapContext.Provider value={value}>
+			<MUIThemeProvider theme={getTheme('light')}>{children}</MUIThemeProvider>
+		</MapContext.Provider>
+	);
 };
 
 export { MapComponentsProvider };
-export default MapContext;
+export default MapContext;

package/src/custom.d.ts

@@ -0,0 +1,4 @@
+import { GeoJSONFeature } from "maplibre-gl";
+import { GeoJSONObject } from '@turf/turf';
+
+export type GeoJSON = (GeoJSONFeature & GeoJSONObject);

package/src/decorators/EmptyMapDecorator.js

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+
+import { MapComponentsProvider } from '../index';
+import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
+import './style.css';
+import MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
+
+const decorators = [
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+						<MapLibreMap
+							mapId="map_1"
+							options={{
+								zoom: 12.5,
+								center: [7.0851268, 50.73884],
+							}}
+						/>
+						<MlNavgiationTools
+							sx={{ bottom: '25px', right: '5px' }}
+							showZoomButtons={false}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
+			</div>
+		);
+	},
+];
+
+export default decorators;

package/src/decorators/MapContextDecorator.js

@@ -1,34 +1,39 @@
-import React from "react";
+import React, { useMemo } from 'react';
 
-import { MapComponentsProvider } from "../index";
-import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
-import "./style.css";
-import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-import ThemeWrapper from "./ThemeWrapper";
+import { MapComponentsProvider } from '../index';
+import MapLibreMap from '../components/MapLibreMap/MapLibreMap';
+import './style.css';
+import MlNavgiationTools from '../components/MlNavigationTools/MlNavigationTools';
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
-	(Story) => (
-		<div className="fullscreen_map">
-			<ThemeWrapper>
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
 				<MapComponentsProvider>
-					<Story />
-					<MapLibreMap
-						options={{
-							zoom: 14.5,
-							style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-							center: [7.0851268, 50.73884],
-						}}
-						mapId="map_1"
-					/>
-					<MlNavgiationTools
-						sx={{ bottom: "25px", right: 0 }}
-						showZoomButtons={false}
-						mapId="map_1"
-					/>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+						<MapLibreMap
+							options={{
+								zoom: 14.5,
+								style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+								center: [7.0851268, 50.73884],
+							}}
+							mapId="map_1"
+						/>
+						<MlNavgiationTools
+							sx={{ bottom: '25px', right: '5px' }}
+							showZoomButtons={false}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
 				</MapComponentsProvider>
-			</ThemeWrapper>
-		</div>
-	),
+			</div>
+		);
+	},
 ];
 
 export default decorators;

package/src/decorators/MapContextDecoratorHooks.js

@@ -1,34 +1,39 @@
-import React from "react";
+import React, {  useMemo } from 'react';
 
 import { MapComponentsProvider } from "../index";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
 import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
-import ThemeWrapper from "./ThemeWrapper";
+import { ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
+import getTheme from '../ui_components/MapcomponentsTheme';
 
 const decorators = [
-  (Story) => (
-    <div className="fullscreen_map">
-      <ThemeWrapper>
-        <MapComponentsProvider>
-          <Story />
-          <MapLibreMap
-            options={{
-              zoom: 14.5,
-              style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
-              center: [7.0851268, 50.73884],
-            }}
-            mapId="map_1"
-          />
-          <MlNavgiationTools
-						sx={{ bottom: "25px", right: 0 }}
-            showZoomButtons={false}
-            mapId="map_1"
-          />
-        </MapComponentsProvider>
-      </ThemeWrapper>
-    </div>
-  ),
+	(Story, context) => {
+		const theme = useMemo(() => getTheme(context?.globals?.theme), [context?.globals?.theme]);
+
+		return (
+			<div className="fullscreen_map">
+				<MapComponentsProvider>
+					<MUIThemeProvider theme={theme}>
+						<Story />
+						<MapLibreMap
+							options={{
+								zoom: 14.5,
+								style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
+								center: [7.0851268, 50.73884],
+							}}
+							mapId="map_1"
+						/>
+						<MlNavgiationTools
+							sx={{ bottom: '25px', right: '5px' }}
+							showZoomButtons={false}
+							mapId="map_1"
+						/>
+					</MUIThemeProvider>
+				</MapComponentsProvider>
+			</div>
+		);
+	},
 ];
 
 export default decorators;