@mapcomponents/ra-geospatial 1.5.3 → 1.5.5

package/.babelrc

@@ -0,0 +1,12 @@
+{
+	"presets": [
+		[
+			"@nx/react/babel",
+			{
+				"runtime": "automatic",
+				"useBuiltIns": "usage"
+			}
+		]
+	],
+	"plugins": []
+}

package/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {
+			builder: {
+				viteConfigPath: 'vite.config.ts',
+			},
+		},
+	},
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import wheregroupTheme from "./wheregroupTheme";
+
+addons.setConfig({
+  theme: wheregroupTheme,
+});

package/.storybook/preview.ts

@@ -0,0 +1,27 @@
+import './style.css';
+
+export const parameters = {
+	docs: {
+		inlineStories: false,
+	},
+	actions: { argTypesRegex: '^on[A-Z].*' },
+
+};
+
+export const globalTypes = {
+	theme: {
+		name: 'Theme',
+		title: 'Theme',
+		description: 'Theme for your components',
+		defaultValue: 'light',
+		toolbar: {
+			icon: 'paintbrush',
+			dynamicTitle: true,
+			items: [
+				{ value: 'light', left: '☀️', title: 'Light mode' },
+				{ value: 'dark', left: '🌙', title: 'Dark mode' },
+			],
+		},
+	},
+};
+export const tags = ['autodocs'];

package/.storybook/style.css

@@ -0,0 +1,20 @@
+.docs-story > div:first-child{
+  z-index:0;
+}
+
+.docs-story > div > div:first-child, .innerZoomElementWrapper, .innerZoomElementWrapper > div:first-child, .innerZoomElementWrapper > div:first-child > div:first-child{
+
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.docs-story > div > div:first-child{
+  height: initial;
+}
+
+.innerZoomElementWrapper > div > div > div:first-child{
+  height: 100% !important;
+}

package/.storybook/wheregroupTheme.js

@@ -0,0 +1,9 @@
+import { create } from 'storybook/theming';
+import logo from './mapcomponents_logo.png';
+
+export default create({
+	base: 'light',
+	brandTitle: 'WhereGroup GmbH',
+	brandUrl: 'https://wheregroup.com',
+	brandImage: logo,
+});

package/README.md

@@ -4,7 +4,6 @@
 
 [![npm version](https://badge.fury.io/js/@mapcomponents%2Fra-geospatial.svg)](https://badge.fury.io/js/@mapcomponents%2Fra-geospatial) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) ![downloads](https://img.shields.io/npm/dt/@mapcomponents%2Fra-geospatial.svg) ![downloads](https://img.shields.io/npm/dm/@mapcomponents%2Fra-geospatial.svg)
 
-
 Input and view components to work with geospatial data in react admin. This package is based on @mapcomponents/react-maplibre and uses MapLibre-gl to display geospatial data on a map.
 
 ![RaGeospatialInput & RaGeospatialShow](https://github.com/mapcomponents/ra-geospatial/blob/main/assets/ra_geospatial_screenshots.png?raw=true)
@@ -72,4 +71,4 @@ export const PoiShow = () => (
     </SimpleShowLayout>
   </Show>
 );
-```
+```

package/eslint.config.cjs

@@ -0,0 +1,3 @@
+const baseConfig = require('../../eslint.config.mjs').default;
+
+module.exports = [...baseConfig];

package/package.json

@@ -1,43 +1,29 @@
 {
-	"name": "@mapcomponents/ra-geospatial",
-	"version": "1.5.3",
-	"description": "",
-	"private": false,
-	"main": "index.js",
-	"license": "MIT",
-	"module": "dist/index.esm.js",
-	"source": "src/index.ts",
-	"types": "dist/index.d.ts",
-	"type": "module",
-	"scripts": {
-		"build": "rollup -c",
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"author": "",
-	"dependencies": {
-		"@turf/turf": "^6.5.0",
-		"maplibre-gl": "^2.4.0"
-	},
-	"devDependencies": {
-		"@babel/core": "^7.20.12",
-		"@mapcomponents/react-maplibre": "^0.1.69",
-		"@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",
-		"@turf/helpers": "^6.5.0",
-		"@types/wellknown": "^0.5.4",
-		"react": "^18.2.0",
-		"react-admin": "^4.7.2",
-		"rollup": "^3.12.0",
-		"rollup-plugin-delete": "^2.0.0",
-		"rollup-plugin-import-css": "^3.1.0",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-typescript2": "^0.34.1",
-		"typescript": "^4.9.5",
-		"wellknown": "^0.5.0"
-	},
-	"gitHead": "8570f4d4c3bd5e74a14d80c456a5d7a2039ee285"
-}
+  "name": "@mapcomponents/ra-geospatial",
+  "version": "1.5.5",
+  "main": "src/index.ts",
+  "types": "./index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mapcomponents/react-maplibre": "^1.3.3",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@turf/helpers": "^7.2.0",
+    "@turf/turf": "^7.2.0",
+    "@types/geojson": "^7946.0.16",
+    "lodash": "^4.17.21",
+    "maplibre-gl": "^5.6.1",
+    "ra-data-fakerest": "^5.10.0",
+    "react-admin": "^5.10.0",
+    "react-router-dom": "^7.7.1",
+    "wellknown": "^0.5.0"
+  }
+}

package/project.json

@@ -0,0 +1,8 @@
+{
+	"name": "ra-geospatial",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "libs/ra-geospatial/src",
+	"projectType": "library",
+	"tags": [],
+	"targets": {}
+}

package/src/components/GeospatialInput.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta } from '@storybook/react';
+import GeospatialInput from './GeospatialInput';
+import { ReactAdminDefaultDecorator } from '../decorators/ReactAdminDefaultDecorator';
+import { PoiEdit, PoiEditWebGis } from '../ra_components/Poi';
+import { PropertyEdit, PropertyEditWebGis } from '../ra_components/Property';
+import { RouteEdit, RouteEditWebGis } from '../ra_components/Route';
+import GisLayout from '../layout/GisLayout';
+
+const meta = {
+	component: GeospatialInput,
+	title: 'MapComponents/GeospatialInput',
+	decorators: [ReactAdminDefaultDecorator],
+} satisfies Meta<typeof GeospatialInput>;
+
+export default meta;
+
+export const PoisEdit = PoiEdit.bind({});
+
+PoisEdit.args = {
+	primary: true,
+	embeddedMap: true,
+};
+
+PoisEdit.parameters = {
+	name: 'pois',
+};
+export const PropertiesEdit = PropertyEdit.bind({});
+
+PropertiesEdit.args = {
+	primary: true,
+	embeddedMap: true,
+};
+
+PropertiesEdit.parameters = {
+	name: 'properties',
+};
+
+export const RoutesEdit = RouteEdit.bind({});
+
+RoutesEdit.args = {
+	primary: true,
+	embeddedMap: true,
+};
+
+RoutesEdit.parameters = {
+	name: 'routes',
+};
+
+export const PoisEditGIS = PoiEditWebGis.bind({});
+
+PoisEditGIS.args = {
+	primary: true,
+	embeddedMap: false,
+};
+
+PoisEditGIS.parameters = {
+	name: 'pois',
+	layout: GisLayout,
+};
+
+export const PropertiesEditGIS = PropertyEditWebGis.bind({});
+
+PropertiesEditGIS.args = {
+	primary: true,
+	embeddedMap: false,
+};
+
+PropertiesEditGIS.parameters = {
+	name: 'properties',
+	layout: GisLayout,
+};
+
+export const RoutesEditGIS = RouteEditWebGis.bind({});
+
+RoutesEditGIS.args = {
+	primary: true,
+	embeddedMap: false,
+};
+
+RoutesEditGIS.parameters = {
+	name: 'routes',
+	layout: GisLayout,
+};

package/src/components/GeospatialInput.tsx

@@ -1,24 +1,21 @@
-import React from "react";
-import { MapComponentsProvider } from "@mapcomponents/react-maplibre";
-import GeometryInputMap, {
-  GeospatialInputMapProps,
-} from "./GeospatialInputMap.js";
+import { MapComponentsProvider } from '@mapcomponents/react-maplibre';
+import GeospatialInputMap, { GeospatialInputMapProps } from './GeospatialInputMap.js';
 
 function GeospatialInput(props: GeospatialInputMapProps) {
-  return (
-    <>
-      {props.embeddedMap ? (
-        <MapComponentsProvider>
-          <GeometryInputMap {...props} />
-        </MapComponentsProvider>
-      ) : (
-        <GeometryInputMap {...props} />
-      )}
-    </>
-  );
+	return (
+		<>
+			{props.embeddedMap ? (
+				<MapComponentsProvider>
+					<GeospatialInputMap {...props} />
+				</MapComponentsProvider>
+			) : (
+				<GeospatialInputMap {...props} />
+			)}
+		</>
+	);
 }
 GeospatialInput.defaultProps = {
-  embeddedMap: true,
+	embeddedMap: true,
 };
 
 export default GeospatialInput;