@mapcomponents/ra-geospatial 1.0.4 → 1.5.1-0

package/.babelrc

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

package/.storybook/main.ts

@@ -0,0 +1,25 @@
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+	framework: {
+		name: getAbsolutePath("@storybook/react-vite"),
+		options: {
+			builder: {
+				viteConfigPath: 'vite.config.ts',
+			},
+		},
+	},
+	staticDirs: ['../public'],
+};
+
+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
+
+function getAbsolutePath(value: string): any {
+	return dirname(require.resolve(join(value, "package.json")));
+}

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

@@ -1,4 +1,74 @@
+<img src="https://avatars.githubusercontent.com/u/64851912" alt="MapComponents logo" width="80"/>
+
 # @mapcomponents/ra-geospatial
 
-Input and view components to work with geospatial data in react admin.
+[![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)
+
+RaGeospatialInput & RaGeospatialShow used to edit a polygon geometry in a react-admin application.
+
+## Demos
+
+- [react admin & mapcomponents Demo](https://cioddi.github.io/mc-react-admin-apps/react-admin-demo)
+- [webGIS Demo (embeddedMap: false)](https://cioddi.github.io/mc-react-admin-apps/webgis-demo)
+
+## Installation
+
+```bash
+yarn add @mapcomponents/ra-geospatial
+```
+
+## Exports
+
+### RaGeospatialInput
+
+Input component to edit or create geospatial data.
+
+### RaGeospatialShow
+
+Show component to display geospatial data.
+
+#### Props
+
+- **embeddedMap**: boolean (default: false) - If true, the map will be embedded in the component. If false, the component will not create it's own MapContext and add a MapLibreMap component but instead expect a MapContext and a MapLibreMap component to be present in the parent component.
+
+## Examples
+
+```JSX
+import {
+  RaGeospatialInput,
+  RaGeospatialShow,
+} from "@mapcomponents/ra-geospatial";
+
+export const PoiEdit = () => (
+  <Edit>
+    <SimpleForm>
+      <TextInput source="title" />
+      <TextInput source="geom" />
+      <RaGeospatialInput source="geom" />
+    </SimpleForm>
+  </Edit>
+);
+export const PoiCreate = () => (
+  <Create>
+    <SimpleForm>
+      <TextInput source="title" />
+      <TextInput source="geom" />
+      <RaGeospatialInput source="geom" />
+    </SimpleForm>
+  </Create>
+);
 
+export const PoiShow = () => (
+  <Show>
+    <SimpleShowLayout>
+      <TextField source="id" />
+      <TextField source="title" />
+      <RaGeospatialShow source="geom" />
+    </SimpleShowLayout>
+  </Show>
+);
+```

package/eslint.config.cjs

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

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>Ra-Geospatial</title>
+		<base href="/" />
+
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="icon" type="image/x-icon" href="./favicon.ico" />
+		<link rel="stylesheet" href="/src/styles.css" />
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

package/package.json

@@ -1,42 +1,28 @@
 {
   "name": "@mapcomponents/ra-geospatial",
-  "version": "1.0.4",
-  "description": "",
-  "private": false,
-  "main": "index.js",
-  "license": "MIT",
-  "module": "dist/index.esm.js",
-  "source": "src/index.ts",
-  "types": "dist/index.d.ts",
+  "version": "1.5.1-0",
+  "main": "src/index.ts",
+  "types": "./index.d.ts",
   "type": "module",
-  "scripts": {
-    "build": "rollup -c",
-    "test": "echo \"Error: no test specified\" && exit 1"
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
   },
-  "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",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@turf/helpers": "^7.2.0",
+    "@turf/turf": "^7.2.0",
+    "@types/geojson": "^7946.0.16",
+    "lodash": "^4.17.21",
+    "maplibre-gl": "^5.7.0",
+    "ra-data-fakerest": "^5.11.0",
+    "react-admin": "^5.11.0",
+    "react-router-dom": "^7.8.2",
     "wellknown": "^0.5.0"
   }
-}
+}

package/project.json

@@ -0,0 +1,14 @@
+{
+	"name": "ra-geospatial",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "packages/ra-geospatial/src",
+	"projectType": "library",
+	"tags": [],
+	"targets": {
+		"storybook": {
+			"options": {
+				"port": 4402
+			}
+		}
+	}
+}

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+	"short_name": "React App",
+	"name": "Create React App Sample",
+	"icons": [
+		{
+			"src": "favicon.ico",
+			"sizes": "64x64 32x32 24x24 16x16",
+			"type": "image/x-icon"
+		},
+		{
+			"src": "favicon.ico",
+			"type": "image/png",
+			"sizes": "192x192"
+		},
+		{
+			"src": "logo512.png",
+			"type": "image/png",
+			"sizes": "512x512"
+		}
+	],
+	"start_url": ".",
+	"display": "standalone",
+	"theme_color": "#000000",
+	"background_color": "#ffffff"
+}

package/src/components/GeospatialInput.stories.tsx

@@ -0,0 +1,83 @@
+import type { Meta } from '@storybook/react-vite';
+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;