@mapcomponents/react-maplibre 0.1.67 → 0.1.68

package/dist/ui_components/Dropzone.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     setData: (data: string) => void;
 };

package/dist/ui_components/ImageLoader.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface ImageLoaderProps {
     src: string;

package/dist/ui_components/LayerList/LayerList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    children: JSX.Element | JSX.Element[];
+};
+declare function LayerList({ children }: Props): JSX.Element;
+export default LayerList;

package/dist/ui_components/LayerList/LayerList.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import LayerList from './LayerList';
+declare const storyoptions: {
+    title: string;
+    component: typeof LayerList;
+    argTypes: {};
+    decorators: ((Story: any, context: any) => JSX.Element)[];
+};
+export default storyoptions;
+export declare const ExampleConfig: any;
+export declare const FolderExample: any;
+export declare const VectortileExample: any;

package/dist/ui_components/LayerList/LayerListFolder.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    visible: boolean;
+    name?: string;
+    children: JSX.Element | JSX.Element[];
+    setVisible?: (visible: boolean | ((val: unknown) => boolean)) => void;
+};
+export default function LayerListFolder({ visible, name, children, setVisible }: Props): JSX.Element;
+export {};

package/dist/ui_components/LayerList/LayerListItem.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+type Props = {
+    layerComponent: JSX.Element;
+    visible: boolean;
+    configurable: boolean;
+    type?: 'background' | 'background-labels' | 'layer' | 'wms-layer' | 'vector-tile-layer';
+    name: string;
+    description?: string;
+    setLayerState?: (state: unknown) => void;
+};
+declare function LayerListItem({ layerComponent, visible, type, name, description, configurable, setLayerState, }: Props): JSX.Element;
+declare namespace LayerListItem {
+    var defaultProps: {
+        type: string;
+        visible: boolean;
+    };
+}
+export default LayerListItem;

package/dist/ui_components/LayerList/util/LayerListItemVectorLayer.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { MlVectorTileLayerProps } from '../../../components/MlVectorTileLayer/MlVectorTileLayer';
+type Props = {
+    id: string;
+    configurable?: boolean;
+    vtProps: MlVectorTileLayerProps;
+    setVtProps: ((state: unknown) => void) | undefined;
+};
+declare function LayerListItemVectorLayer({ configurable, vtProps, setVtProps, id }: Props): JSX.Element;
+declare namespace LayerListItemVectorLayer {
+    var defaultProps: {
+        configurable: boolean;
+    };
+}
+export default LayerListItemVectorLayer;

package/dist/ui_components/LayerList/util/LayerPropertyForm.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification } from 'maplibre-gl';
+export type paintPropsType = CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
+type Props = {
+    paintProps: paintPropsType;
+    setPaintProps: (paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)) => void;
+    layerType: string;
+};
+export default function LayerPropertyForm({ paintProps, setPaintProps }: Props): JSX.Element;
+export {};

package/dist/ui_components/LayerList/util/input/ColorPicker.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { paintPropsType } from '../LayerPropertyForm';
+type Props = {
+    key: string;
+    value: string;
+    propKey: string;
+    setPaintProps: (paintProps: paintPropsType | ((current: paintPropsType) => paintPropsType)) => void;
+};
+export default function PaintPropsColorPicker({ propKey, value, setPaintProps }: Props): JSX.Element;
+export {};

package/dist/ui_components/LoadingOverlayContext.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { JsxChildren } from 'typedoc/dist/lib/utils/jsx.elements';
 declare const LoadingOverlayContext: React.Context<{}>;
 declare const LoadingOverlayProvider: {
     (children: JsxChildren): JSX.Element;

package/dist/ui_components/MapcomponentsTheme.d.ts

@@ -0,0 +1,7 @@
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        navtools: true;
+    }
+}
+declare const getTheme: (mode: 'light' | 'dark') => import("@mui/material/styles").Theme;
+export default getTheme;

package/dist/ui_components/Tooltip.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export default function Legend(): JSX.Element;

package/dist/ui_components/TopToolbar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AppBarProps, ToolbarProps, SxProps } from '@mui/material';
 interface TopToolbarProps extends AppBarProps {
     toolbarProps?: ToolbarProps;

package/dist/ui_components/UploadButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type Props = {
     setData: (data: string) => void;
     buttonComponent: any;

package/dist/util/Instructions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SxProps } from '@mui/material';
 interface StepObject {
     duration: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mapcomponents/react-maplibre",
-	"version": "0.1.67",
+	"version": "0.1.68",
 	"main": "index.js",
 	"license": "MIT",
 	"module": "dist/index.esm.js",
@@ -19,7 +19,13 @@
 		"build-catalogue-markdown-docs": "node scripts/build-catalogue-markdown-docs.js",
 		"create-component": "./scripts/create-map-component.sh"
 	},
-	"dependencies": {
+	"dependencies": {},
+	"peerDependencies": {},
+	"devDependencies": {
+		"@babel/preset-react": "^7.18.6",
+		"@bahmutov/cy-rollup": "^2.0.0",
+		"@cypress/react": "^7.0.2",
+		"@cypress/webpack-preprocessor": "^5.16.1",
 		"@emotion/css": "11.10.5",
 		"@emotion/react": "11.10.5",
 		"@emotion/styled": "11.10.5",
@@ -30,30 +36,8 @@
 		"@mui/icons-material": "5.11.0",
 		"@mui/material": "5.11.6",
 		"@mui/styles": "5.11.2",
-		"@turf/turf": "^6.5.0",
-		"d3": "^7.8.2",
-		"jspdf": "^2.5.1",
-		"maplibre-gl": "^2.4.0",
-		"mui-color": "^2.0.0-beta.2",
-		"react-draggable": "^4.4.5",
-		"react-i18next": "^12.1.4",
-		"react-moveable": "^0.45.1",
-		"storybook-source-link": "^2.0.4",
-		"three": "^0.149.0",
-		"uuid": "^9.0.0",
-		"wms-capabilities": "^0.6.0",
-		"xmldom": "^0.6.0"
-	},
-	"peerDependencies": {},
-	"devDependencies": {
-		"@babel/preset-react": "^7.18.6",
-		"@bahmutov/cy-rollup": "^2.0.0",
-		"@cypress/react": "^7.0.2",
-		"@cypress/webpack-preprocessor": "^5.16.1",
-		"@rollup/plugin-alias": "^4.0.3",
 		"@rollup/plugin-babel": "^6.0.3",
 		"@rollup/plugin-commonjs": "^24.0.1",
-		"@rollup/plugin-node-resolve": "^15.0.1",
 		"@rollup/plugin-url": "^8.0.1",
 		"@storybook/addon-actions": "^6.5.16",
 		"@storybook/addon-docs": "^6.5.16",
@@ -69,6 +53,7 @@
 		"@storybook/theming": "^6.5.16",
 		"@svgr/rollup": "^6.5.1",
 		"@testing-library/react": "^13.4.0",
+		"@turf/turf": "^6.5.0",
 		"@types/enzyme": "^3.10.12",
 		"@types/expect": "^24.3.0",
 		"@types/jest": "^29.4.0",
@@ -88,6 +73,7 @@
 		"babel-plugin-styled-components": "^2.0.7",
 		"babel-preset-react-app": "^10.0.1",
 		"cypress": "^12.4.1",
+		"d3": "^7.8.2",
 		"enzyme": "^3.11.0",
 		"eslint": "^8.32.0",
 		"eslint-config-prettier": "^8.6.0",
@@ -99,6 +85,9 @@
 		"jest-enzyme": "^7.1.2",
 		"jest-resolve": "26.6.0",
 		"jest-watch-typeahead": "0.6.1",
+		"jspdf": "^2.5.1",
+		"maplibre-gl": "^2.4.0",
+		"mui-color": "^2.0.0-beta.2",
 		"node-fetch": "^3.3.0",
 		"postcss": "^8.4.21",
 		"prettier": "2.8.3",
@@ -106,18 +95,22 @@
 		"react-app-polyfill": "^3.0.0",
 		"react-dev-utils": "^12.0.1",
 		"react-dom": "^18.2.0",
+		"react-draggable": "^4.4.5",
+		"react-i18next": "^12.1.4",
+		"react-moveable": "^0.45.1",
 		"rollup": "^2.70.1",
 		"rollup-plugin-delete": "^2.0.0",
 		"rollup-plugin-import-css": "^3.0.3",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-node-externals": "^5.1.2",
 		"rollup-plugin-typescript2": "^0.31.2",
 		"showdown": "^2.1.0",
+		"storybook-source-link": "^2.0.4",
+		"three": "^0.149.0",
 		"ts-jest": "^29.0.5",
-		"typedoc": "^0.23.24",
-		"typedoc-plugin-missing-exports": "^1.0.0",
-		"typedoc-twilio-theme": "^1.0.1",
-		"typescript": "^4.9.4"
+		"typescript": "^4.9.4",
+		"uuid": "^9.0.0",
+		"wms-capabilities": "^0.6.0",
+		"xmldom": "^0.6.0"
 	},
 	"jest": {
 		"roots": [
@@ -152,7 +145,7 @@
 		"moduleNameMapper": {
 			"^react-native$": "react-native-web",
 			"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
-			"^!maplibre-gl$": "<rootDir>/node_modules/maplibre-gl",
+			"^maplibre-gl/dist/maplibre-gl$": "<rootDir>/node_modules/maplibre-gl",
 			"d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
 		},
 		"moduleFileExtensions": [

package/rollup.config.js

@@ -1,57 +1,74 @@
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import typescript from 'rollup-plugin-typescript2';
+import { defineConfig } from 'rollup';
 
 import babel from '@rollup/plugin-babel';
 import url from '@rollup/plugin-url';
-import external from 'rollup-plugin-peer-deps-external';
+import externals from 'rollup-plugin-node-externals';
 
 import css from 'rollup-plugin-import-css';
 import del from 'rollup-plugin-delete';
 import svgr from '@svgr/rollup';
 
-import pkg from "./package.json";
+import pkg from './package.json';
 
-const config = {
-	input: pkg.source,
-	output: [{ file: pkg.module, format: 'esm', sourcemap: true }],
-	plugins: [
-		svgr({
-			svgo: false,
-		}),
-		url(),
-		babel({
-			exclude: 'node_modules/**',
-			babelHelpers: 'bundled',
-			presets: ['@babel/preset-react'],
-		}),
-		external(),
-		peerDepsExternal(),
-		resolve(),
-		commonjs(),
-		typescript({
-			useTsconfigDeclarationDir: true,
-			tsconfig: 'tsconfig.json',
-		}),
-		css(),
-		del({ targets: ['build/*'] }),
-	],
-	external: [
-		'!maplibre-gl',
-		'prop-types',
-		'd3',
-		'@emotion/react',
-		'@emotion/styled',
-		'@babel/helpers',
-		'jspdf',
-		...Object.keys(pkg.dependencies),
-		...Object.keys(pkg.peerDependencies),
-		...Object.keys(pkg.devDependencies),
-	],
- inlineDynamicImports: true,
-	onwarn: function (warning, warn) {
-		warn(warning);
-	},
+const externalsConfig = {
+	deps: true,
+	devDeps: true,
+	exclude:['react', 'react-dom']
 };
+
+const config = defineConfig([
+	// CJS config
+	//{
+	//	input: ['src/index.ts'],
+	//	output: {
+	//		file: 'dist/index.js',
+	//		format: 'cjs',
+	//		sourcemap: true,
+	//	},
+	//	plugins: [
+	//		svgr({
+	//			svgo: false,
+	//		}),
+	//		url(),
+	//		babel(),
+	//		externals(externalsConfig),
+	//		typescript({ declarationDir: 'dist/types', sourceMap: true }),
+	//		css(),
+	//		del({ targets: ['dist/*'] }),
+	//	],
+	//},
+	// ESM config
+	{
+		input: ['src/index.ts'],
+		output: {
+			file: 'dist/index.esm.js',
+			format: 'cjs',
+			sourcemap: true,
+		},
+		plugins: [
+			svgr({
+				svgo: false,
+			}),
+			url(),
+			babel({
+				presets: ['@babel/preset-react'],
+			}),
+			externals(externalsConfig),
+			commonjs(),
+			typescript({ declarationDir: 'dist/types', sourceMap: true }),
+			css(),
+			del({ targets: ['dist/*'] }),
+		],
+		external: [
+			'react',
+			'react-dom',
+			'd3',
+			...Object.keys(pkg.dependencies),
+			...Object.keys(pkg.peerDependencies),
+			...Object.keys(pkg.devDependencies),
+		],
+	},
+]);
 export default config;

package/src/@types/assets/index.d.ts

@@ -17,4 +17,4 @@ declare module "*.png" {
 declare module "*.json" {
   const content: string;
   export default content;
-}
+}

package/src/App.css

@@ -1,55 +0,0 @@
-/**
- * #root {
-  background-color: #000;
-  position: absolute;
-  min-height: 400px;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-.docs-story {
-  min-height: 400px;
-  display: flex;
-  align-items: stretch;
-}
-.docs-story > div:first-child {
-  width: 100%;
-}
-.MuiToolbar-root .MuiButtonBase-root {
-  margin-right: 8px;
-}
-
-.App {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-.mapContainer {
-  position: absolute;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  z-index: 100;
-}
-
-.overlay {
-  width: 100%;
-  display: inline-flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: transparent;
-  z-index: 1 !important;
-  padding-top: 1rem;
-  padding-left: 1rem;
-}
-.MuiToolbar-root .MuiButtonBase-root {
-  margin-right: 8px;
-}
-*/

package/src/components/MapLibreMap/MapLibreMap.stories.js

@@ -1,53 +1,52 @@
 import React, { useState } from "react";
 
-import MapLibreMap from "./MapLibreMap";
-import { MapComponentsProvider } from "../../contexts/MapContext";
-import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-import { Button } from "@mui/material";
-import TopToolbar from "../../ui_components/TopToolbar";
-import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
+import MapLibreMap from './MapLibreMap';
+import MlGeoJsonLayer from '../MlGeoJsonLayer/MlGeoJsonLayer';
+import { Button } from '@mui/material';
+import TopToolbar from '../../ui_components/TopToolbar';
+import sample_geojson_1 from '../MlGeoJsonLayer/assets/sample_1.json';
+
+import themeDecorator from '../../decorators/ThemeDecorator';
 
 const storyoptions = {
-	title: "Core/MapLibreMap",
+	title: 'Core/MapLibreMap',
 	component: MapLibreMap,
 	argTypes: {
 		options: {
 			control: {
-				type: "object",
+				type: 'object',
 			},
 		},
 	},
-
-  parameters: {
-    sourceLink: 'components/MapLibreMap/MapLibreMap.tsx'
-	}
+	decorators: themeDecorator,
+	parameters: {
+		sourceLink: 'components/MapLibreMap/MapLibreMap.tsx',
+	},
 };
 export default storyoptions;
 
 const Template = (args) => {
 	return (
-		<MapComponentsProvider>
-			<MapLibreMap
-				options={{ ...args.options }}
-				style={{
-					position: "absolute",
-					height: "100vh",
-					width: "100vw",
-					top: 0,
-					right: 0,
-					left: 0,
-					bottom: 0,
-					zIndex: 100,
-				}}
-			/>
-		</MapComponentsProvider>
+		<MapLibreMap
+			options={{ ...args.options }}
+			style={{
+				position: 'absolute',
+				height: '100vh',
+				width: '100vw',
+				top: 0,
+				right: 0,
+				left: 0,
+				bottom: 0,
+				zIndex: 100,
+			}}
+		/>
 	);
 };
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.args = {
 	options: {
-		style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
+		style: 'https://wms.wheregroup.com/tileserver/style/osm-bright.json',
 		center: [8.607, 53.1409349],
 		zoom: 14,
 	},
@@ -55,24 +54,24 @@ ExampleConfig.args = {
 
 const StyleChangeTemplate = (args) => {
 	const [activeStyle, setActiveStyle] = useState(
-		"https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json"
+		'https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json'
 	);
 
 	return (
-		<MapComponentsProvider>
+		<>
 			<TopToolbar>
 				<Button
 					onClick={() =>
-						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-bright.json")
+						setActiveStyle('https://wms.wheregroup.com/tileserver/style/osm-bright.json')
 					}
 					variant="contained"
-					sx={{marginRight:'5px'}}
+					sx={{ marginRight: '5px' }}
 				>
 					OSM-Bright
 				</Button>
 				<Button
 					onClick={() =>
-						setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json")
+						setActiveStyle('https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json')
 					}
 					variant="contained"
 				>
@@ -82,9 +81,9 @@ const StyleChangeTemplate = (args) => {
 			<MapLibreMap
 				options={{ ...args.options, style: activeStyle }}
 				style={{
-					position: "absolute",
-					height: "100vh",
-					width: "100vw",
+					position: 'absolute',
+					height: '100vh',
+					width: '100vw',
 					top: 0,
 					right: 0,
 					left: 0,
@@ -93,7 +92,7 @@ const StyleChangeTemplate = (args) => {
 				}}
 			/>
 			<MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
-		</MapComponentsProvider>
+		</>
 	);
 };
 

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -1,10 +1,10 @@
-import React, { useRef, useEffect, useContext, FC,	RefObject } from "react";
+import React, { useRef, useEffect, useContext, FC, RefObject } from 'react';
 
-import MapContext, { MapContextType } from "../../contexts/MapContext";
-import MapLibreGlWrapper from "./lib/MapLibreGlWrapper";
+import MapContext, { MapContextType } from '../../contexts/MapContext';
+import MapLibreGlWrapper from './lib/MapLibreGlWrapper';
 
-import { MapOptions as MapOptionsType } from "maplibre-gl";
-import "maplibre-gl/dist/maplibre-gl.css";
+import { MapOptions as MapOptionsType, Map } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
 
 type MapLibreMapProps = {
 	/**
@@ -31,16 +31,18 @@ const defaultProps: MapLibreMapProps = {
 		container: '',
 		style: {
 			version: 8,
-			name: "blank",
+			name: 'blank',
 			center: [0, 0],
 			zoom: 0,
 			sources: {},
+			sprite: 'https://wms.wheregroup.com/tileserver/sprites/osm-bright',
+			glyphs: 'https://wms.wheregroup.com/tileserver/fonts/{fontstack}/{range}.pbf',
 			layers: [
 				{
-					id: "background",
-					type: "background",
+					id: '_background',
+					type: 'background',
 					paint: {
-						"background-color": "rgba(0,0,0,0)",
+						'background-color': 'rgba(0,0,0,0)',
 					},
 				},
 			],
@@ -81,19 +83,17 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 	useEffect(() => {
 		if (initializedRef.current) return;
 
-		console.log(mapContainer.current);
-		
 		if (mapContainer.current) {
 			initializedRef.current = true;
 			map.current = new MapLibreGlWrapper({
 				mapOptions: {
 					style: '',
 					...props.options,
-					...(props?.options?.style?{}:{style:defaultProps?.options?.style}),
+					...(props?.options?.style ? {} : { style: defaultProps?.options?.style }),
 					container: mapContainer.current,
 				},
-				onReady: (map: any, wrapper: any) => {
-					map.once("load", () => {
+				onReady: (map: Map, wrapper: MapLibreGlWrapper) => {
+					map.once('load', () => {
 						if (props.mapId) {
 							mapContext.registerMap(props.mapId, wrapper);
 						} else {
@@ -107,13 +107,19 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 
 	useEffect(() => {
 		if (map.current?.map && props?.options?.style && currentStyle.current !== props.options.style) {
-			console.log("set style");
+			console.log('set style');
 			currentStyle.current = props.options.style;
 			map.current.map.setStyle(props.options.style);
 		}
-	}, [props?.options?.style])
+	}, [props?.options?.style]);
 
-	return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
+	return (
+		<div
+			ref={mapContainer as RefObject<HTMLDivElement>}
+			className="mapContainer"
+			style={props.style}
+		/>
+	);
 };
 
 MapLibreMap.defaultProps = defaultProps;

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -10,7 +10,7 @@ import {
 	SourceSpecification,
 	ControlPosition,
 	StyleImageMetadata,
-} from '!maplibre-gl';
+} from 'maplibre-gl';
 import { Map as MapType, Style } from 'maplibre-gl';
 
 type WrapperEventArgArray = [string, (arg0: unknown) => void];