@mapcomponents/react-maplibre 0.1.66 → 0.1.68

package/dist/setupTests.d.ts

@@ -1,11 +1,11 @@
 export var uuid_regex: string;
 export namespace mockMapLibreMethods {
-    const on: jest.Mock<any, any>;
-    const off: jest.Mock<any, any>;
-    const addControl: jest.Mock<any, any>;
-    const removeControl: jest.Mock<any, any>;
-    const fitBounds: jest.Mock<any, any>;
-    const hasControl: jest.Mock<boolean, []>;
+    const on: jest.Mock<any, any, any>;
+    const off: jest.Mock<any, any, any>;
+    const addControl: jest.Mock<any, any, any>;
+    const removeControl: jest.Mock<any, any, any>;
+    const fitBounds: jest.Mock<any, any, any>;
+    const hasControl: jest.Mock<boolean, [], any>;
     function getCanvas(): HTMLCanvasElement;
     function getContainer(): {
         style: {};

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.66",
+	"version": "0.1.68",
 	"main": "index.js",
 	"license": "MIT",
 	"module": "dist/index.esm.js",
@@ -19,98 +19,98 @@
 		"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",
+		"@fontsource/material-icons": "^4.5.4",
+		"@fontsource/roboto": "^4.5.8",
 		"@mapbox/mapbox-gl-draw": "^1.3.0",
 		"@mapbox/mapbox-gl-sync-move": "0.3.0",
 		"@mui/icons-material": "5.11.0",
-		"@mui/material": "5.11.0",
-		"@mui/styles": "5.11.0",
-		"@turf/turf": "^6.5.0",
-		"d3": "^7.7.0",
-		"jspdf": "^2.5.1",
-		"maplibre-gl": "^2.4.0",
-		"mui-color": "^2.0.0-beta.2",
-		"react-draggable": "^4.4.5",
-		"react-i18next": "^11.14.3",
-		"react-moveable": "^0.45.1",
-		"three": "^0.147.0",
-		"uuid": "^9.0.0",
-		"wms-capabilities": "^0.6.0",
-		"xmldom": "^0.6.0"
-	},
-	"peerDependencies": {},
-	"devDependencies": {
-		"@babel/preset-react": "^7.16.7",
-		"@bahmutov/cy-rollup": "^2.0.0",
-		"@cypress/react": "^6.2.0",
-		"@cypress/webpack-preprocessor": "^5.14.0",
-		"@rollup/plugin-alias": "^3.1.9",
-		"@rollup/plugin-babel": "^5.3.1",
-		"@rollup/plugin-commonjs": "^21.0.3",
-		"@rollup/plugin-node-resolve": "^13.1.3",
-		"@rollup/plugin-url": "^6.1.0",
-		"@storybook/addon-actions": "^6.4.19",
-		"@storybook/addon-docs": "^6.4.20",
-		"@storybook/addon-essentials": "^6.4.19",
-		"@storybook/addon-links": "^6.4.19",
-		"@storybook/addons": "^6.4.19",
-		"@storybook/node-logger": "^6.4.19",
-		"@storybook/react": "^6.4.19",
+		"@mui/material": "5.11.6",
+		"@mui/styles": "5.11.2",
+		"@rollup/plugin-babel": "^6.0.3",
+		"@rollup/plugin-commonjs": "^24.0.1",
+		"@rollup/plugin-url": "^8.0.1",
+		"@storybook/addon-actions": "^6.5.16",
+		"@storybook/addon-docs": "^6.5.16",
+		"@storybook/addon-essentials": "^6.5.16",
+		"@storybook/addon-links": "^6.5.16",
+		"@storybook/addon-storysource": "^6.5.16",
+		"@storybook/addons": "^6.5.16",
+		"@storybook/builder-webpack5": "^6.5.16",
+		"@storybook/manager-webpack5": "^6.5.16",
+		"@storybook/node-logger": "^6.5.16",
+		"@storybook/react": "^6.5.16",
 		"@storybook/testing-react": "^1.3.0",
-		"@storybook/theming": "^6.4.19",
-		"@svgr/rollup": "^6.2.1",
-		"@testing-library/react": "^12.1.2",
-		"@types/enzyme": "^3.10.11",
+		"@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.2.5",
-		"@types/mapbox__mapbox-gl-draw": "^1.2.3",
+		"@types/jest": "^29.4.0",
+		"@types/mapbox__mapbox-gl-draw": "^1.3.3",
 		"@types/mapbox__point-geometry": "^0.1.2",
 		"@types/mapbox__vector-tile": "^1.3.0",
-		"@types/react": "^17.0.43",
-		"@types/react-dom": "^17.0.14",
-		"@types/uuid": "^8.3.4",
-		"@typescript-eslint/eslint-plugin": "^5.36.1",
-		"@typescript-eslint/parser": "^5.36.1",
-		"@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+		"@types/react": "^18.0.27",
+		"@types/react-dom": "^18.0.10",
+		"@types/three": "^0.148.1",
+		"@types/uuid": "^9.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.49.0",
+		"@typescript-eslint/parser": "^5.49.0",
+		"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
 		"avj": "^0.0.0",
 		"babel-jest": "^26.6.0",
 		"babel-plugin-inline-react-svg": "^2.0.1",
-		"babel-plugin-styled-components": "^2.0.6",
+		"babel-plugin-styled-components": "^2.0.7",
 		"babel-preset-react-app": "^10.0.1",
-		"cypress": "^10.9.0",
+		"cypress": "^12.4.1",
+		"d3": "^7.8.2",
 		"enzyme": "^3.11.0",
-		"eslint": "^8.23.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-react": "^7.31.1",
-		"glob": "^7.2.0",
+		"eslint": "^8.32.0",
+		"eslint-config-prettier": "^8.6.0",
+		"eslint-plugin-react": "^7.32.1",
+		"glob": "^8.1.0",
 		"jest": "26.6.0",
 		"jest-circus": "26.6.0",
 		"jest-environment-jsdom-sixteen": "^2.0.0",
 		"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.12",
-		"prettier": "2.7.1",
-		"react": "^17.0.2",
+		"postcss": "^8.4.21",
+		"prettier": "2.8.3",
+		"react": "^18.2.0",
 		"react-app-polyfill": "^3.0.0",
-		"react-dev-utils": "^12.0.0",
-		"react-dom": "^17.0.2",
+		"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.0.3",
-		"ts-jest": "^27.1.4",
-		"typedoc": "^0.22.13",
-		"typedoc-plugin-missing-exports": "^0.22.6",
-		"typedoc-twilio-theme": "^1.0.1",
-		"typescript": "^4.6.3"
+		"showdown": "^2.1.0",
+		"storybook-source-link": "^2.0.4",
+		"three": "^0.149.0",
+		"ts-jest": "^29.0.5",
+		"typescript": "^4.9.4",
+		"uuid": "^9.0.0",
+		"wms-capabilities": "^0.6.0",
+		"xmldom": "^0.6.0"
 	},
 	"jest": {
 		"roots": [
@@ -145,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,56 +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 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 babel from '@rollup/plugin-babel';
+import url from '@rollup/plugin-url';
+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 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: [
-    "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

@@ -0,0 +1,20 @@
+declare module "*.svg" {
+  import React = require('react');
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+declare module "*.jpg" {
+  const content: string;
+  export default content;
+}
+
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+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;
-}
-*/