@mapcomponents/ra-geospatial 1.5.3 → 1.5.5-0

package/src/contexts/dataProvider.tsx

@@ -0,0 +1,30 @@
+import localStorageDataProvider from './lsDataProvider';
+
+export const defaultData = {
+	pois: [
+		{
+			id: 0,
+			title: 'poi',
+			geom: 'POINT (7.077808464010502 50.74294216203171)',
+		},
+	],
+	properties: [
+		{
+			id: 0,
+			title: 'property',
+			geom: 'POLYGON ((7.066952151714986 50.740002740511244, 7.0639480776189885 50.74065454154203, 7.064291400372213 50.74198527380986, 7.067381305157255 50.742121060690465, 7.067381305157255 50.740518750408825, 7.0669092363712025 50.73997558193838, 7.066952151714986 50.740002740511244))',
+		},
+	],
+	routes: [
+		{
+			id: 0,
+			title: 'route',
+			geom: 'LINESTRING (7.072968944094811 50.737892872017426, 7.0724677647124565 50.73921232584979, 7.0719866325044904 50.7409250229731, 7.071808100376245 50.742318711300925, 7.072108808006249 50.7425470593881, 7.076779799853682 50.742876893548384, 7.077140649009607 50.742775406362085, 7.0774413566381895 50.74257243132925, 7.077862347320121 50.74252168743365, 7.078343479528058 50.74269929082783, 7.078503856930212 50.742889579431534, 7.079466121344723 50.74290226531082, 7.080187819656601 50.742876893548384, 7.08082932926672 50.74281346408284)',
+		},
+	],
+};
+
+export const dataProvider = localStorageDataProvider({
+	localStorageUpdateDelay: 2,
+	defaultData: defaultData,
+});

package/src/contexts/lsDataProvider.js

@@ -0,0 +1,138 @@
+import fakeRestProvider from 'ra-data-fakerest';
+import pullAt from 'lodash/pullAt';
+
+/**
+ * Respond to react-admin data queries using a local database persisted in localStorage
+ *
+ * Useful for local-first web apps. The storage is shared between tabs.
+ *
+ * @example // initialize with no data
+ *
+ * import localStorageDataProvider from 'ra-data-local-storage';
+ * const dataProvider.tsx = localStorageDataProvider();
+ *
+ * @example // initialize with default data (will be ignored if data has been modified by user)
+ *
+ * import localStorageDataProvider from 'ra-data-local-storage';
+ * const dataProvider.tsx = localStorageDataProvider({
+ *   defaultData: {
+ *     posts: [
+ *       { id: 0, title: 'Hello, world!' },
+ *       { id: 1, title: 'FooBar' },
+ *     ],
+ *     comments: [
+ *       { id: 0, post_id: 0, author: 'John Doe', body: 'Sensational!' },
+ *       { id: 1, post_id: 0, author: 'Jane Doe', body: 'I agree' },
+ *     ],
+ *   }
+ * });
+ */
+export default function localStorageDataProvider(params) {
+	const {
+		defaultData = {},
+		localStorageKey = 'ra-data-local-storage',
+		loggingEnabled = false,
+		localStorageUpdateDelay = 10, // milliseconds
+	} = params || {};
+	const localStorageData = localStorage.getItem(localStorageKey);
+	let data = localStorageData ? JSON.parse(localStorageData) : defaultData;
+
+	// change data by executing callback, then persist in localStorage
+	const updateLocalStorage = (callback) => {
+		// modify localStorage after the next tick
+		setTimeout(() => {
+			callback();
+			localStorage.setItem(localStorageKey, JSON.stringify(data));
+			const evt = new Event('storageItemUpdated', {
+				bubbles: true,
+				cancelable: false,
+			});
+			document.dispatchEvent(evt);
+		}, localStorageUpdateDelay);
+	};
+
+	let baseDataProvider = fakeRestProvider(data, loggingEnabled);
+
+	window?.addEventListener('storage', (event) => {
+		if (event.key === localStorageKey) {
+			const newData = JSON.parse(event.newValue);
+			data = newData;
+			baseDataProvider = fakeRestProvider(newData, loggingEnabled);
+		}
+	});
+
+	return {
+		// read methods are just proxies to FakeRest
+		getList: (resource, params) =>
+			baseDataProvider.getList(resource, params).catch((error) => {
+				if (error.code === 1) {
+					// undefined collection error: hide the error and return an empty list instead
+					return { data: [], total: 0 };
+				} else {
+					throw error;
+				}
+			}),
+		getOne: (resource, params) => baseDataProvider.getOne(resource, params),
+		getMany: (resource, params) => baseDataProvider.getMany(resource, params),
+		getManyReference: (resource, params) =>
+			baseDataProvider.getManyReference(resource, params).catch((error) => {
+				if (error.code === 1) {
+					// undefined collection error: hide the error and return an empty list instead
+					return { data: [], total: 0 };
+				} else {
+					throw error;
+				}
+			}),
+
+		// update methods need to persist changes in localStorage
+		update: (resource, params) => {
+			updateLocalStorage(() => {
+				const index = data[resource].findIndex((item) => item.id === params.data.id);
+				data[resource][index] = {
+					...params.data,
+				};
+			});
+			return baseDataProvider.update(resource, params);
+		},
+		updateMany: (resource, params) => {
+			updateLocalStorage(() => {
+				params.ids.forEach((id) => {
+					const index = data[resource]?.findIndex((record) => record.id === id);
+					data[resource][index] = {
+						...data[resource][index],
+						...params.data,
+					};
+				});
+			});
+			return baseDataProvider.updateMany(resource, params);
+		},
+		create: (resource, params) => {
+			// we need to call the fakerest provider first to get the generated id
+			return baseDataProvider.create(resource, params).then((response) => {
+				updateLocalStorage(() => {
+					if (!Object.prototype.hasOwnProperty.call(data, resource)) {
+						data[resource] = [];
+					}
+					data[resource].push(response.data);
+				});
+				return response;
+			});
+		},
+		delete: (resource, params) => {
+			updateLocalStorage(() => {
+				const index = data[resource]?.findIndex((record) => record.id === params.id);
+				pullAt(data[resource], [index]);
+			});
+			return baseDataProvider.delete(resource, params);
+		},
+		deleteMany: (resource, params) => {
+			updateLocalStorage(() => {
+				const indexes = params.ids.map((id) =>
+					data[resource]?.findIndex((record) => record.id === id)
+				);
+				pullAt(data[resource], indexes);
+			});
+			return baseDataProvider.deleteMany(resource, params);
+		},
+	};
+}

package/src/decorators/ReactAdminDefaultDecorator.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import DataContextProvider from '../contexts/DataContext';
+import { MapComponentsProvider, MapLibreMap } from '@mapcomponents/react-maplibre';
+import { Admin, CustomRoutes, defaultLightTheme } from 'react-admin';
+import { dataProvider } from '../contexts/dataProvider';
+import { Route } from 'react-router-dom';
+
+export const ReactAdminDefaultDecorator = (Story: React.ComponentType, context: any) => (
+	<DataContextProvider>
+		<MapComponentsProvider>
+			<Admin
+				dataProvider={dataProvider}
+				layout={context.parameters?.layout}
+				theme={defaultLightTheme}
+				key={context.parameters?.name}
+			>
+				<CustomRoutes>
+					<Route path={'/'} element={<Story />} />
+				</CustomRoutes>
+			</Admin>
+			{!context.args.embeddedMap && (
+				<MapLibreMap
+					mapId="map_1"
+					options={{
+						zoom: 14.5,
+						style: 'https://wms.wheregroup.com/tileserver/style/klokantech-basic.json',
+						center: [7.080590113226776, 50.740545567043426],
+					}}
+					style={{
+						position: 'absolute',
+						top: 0,
+						right: 0,
+						left: 0,
+						bottom: 0,
+					}}
+				/>
+			)}
+		</MapComponentsProvider>
+	</DataContextProvider>
+);

package/src/index.ts

@@ -1,2 +1,2 @@
-export {default as RaGeospatialInput} from "./components/GeospatialInput.js";
-export {default as RaGeospatialShow} from "./components/GeospatialShow.js";
+export { default as RaGeospatialInput } from './components/GeospatialInput.js';
+export { default as RaGeospatialShow } from './components/GeospatialShow.js';

package/src/layout/GisLayout.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Box, IconButton, styled } from '@mui/material';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { AppBar, Menu, Sidebar, useSidebarState } from 'react-admin';
+
+const Root = styled('div')(() => ({
+	display: 'flex',
+	flexDirection: 'column',
+	zIndex: 1,
+	minHeight: '100%',
+	position: 'relative',
+	backgroundColor: 'transparent',
+	pointerEvents: 'none',
+}));
+
+const AppFrame = styled('div')(() => ({
+	display: 'flex',
+	flexDirection: 'column',
+}));
+
+const ContentWithSidebar = styled('main')(() => ({
+	display: 'flex',
+	flexGrow: 1,
+	marginTop: '3em',
+}));
+
+const Content = styled('div')(() => ({
+	display: 'flex',
+	flexDirection: 'row',
+	justifyContent: 'center',
+	maxHeight: '50vh',
+	position: 'fixed',
+	bottom: '0',
+	width: '100%',
+	backgroundColor: '#fafafa',
+	overflow: 'auto',
+	pointerEvents: 'all',
+	boxShadow: '0px 0px 8px rgba(0,0,0,0.2)',
+}));
+
+const ContentWrapper = styled(Box)(() => ({
+	maxWidth: '600px',
+	width: '100%',
+	height: '100%',
+}));
+
+const GisLayout = ({ children, title }) => {
+	const [open] = useSidebarState();
+	const [contentOpen, setContentOpen] = useState(true);
+
+	React.useEffect(() => {
+		setContentOpen(true);
+	}, [children]);
+	return (
+		<Root>
+			<AppFrame>
+				<AppBar title={title} open={open} sx={{ pointerEvents: 'all' }} />
+				<ContentWithSidebar>
+					<Sidebar
+						sx={{
+							backgroundColor: '#f0f0f0',
+							pointerEvents: 'all',
+							overflow: 'hidden',
+						}}
+					>
+						<Menu />
+					</Sidebar>
+					<Content
+						sx={{
+							...(contentOpen ? {} : { height: '40px', overflow: 'hidden' }),
+						}}
+					>
+						<IconButton
+							onClick={() => setContentOpen((val) => !val)}
+							sx={{ position: 'absolute', top: 0, zIndex: 100 }}
+						>
+							{contentOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}
+						</IconButton>
+
+						<ContentWrapper>{children}</ContentWrapper>
+					</Content>
+				</ContentWithSidebar>
+			</AppFrame>
+		</Root>
+	);
+};
+
+export default GisLayout;

package/src/ra_components/Poi.tsx

@@ -0,0 +1,42 @@
+import { Edit, SimpleForm, TextInput, Show, SimpleShowLayout, TextField } from 'react-admin';
+import GeospatialInput from '../components/GeospatialInput';
+import GeospatialShow from '../components/GeospatialShow';
+import raGeospatialProps from './raGeospatialProps';
+import raGeospatialWebGisProps from './raGeospatialWebGisProps';
+
+export const PoiEdit = () => (
+	<Edit mutationMode="optimistic" resource="pois" id="0" redirect={false}>
+		<SimpleForm>
+			<TextInput source="title" />
+			<TextInput source="geom" />
+			<GeospatialInput {...raGeospatialProps} type="point" />
+		</SimpleForm>
+	</Edit>
+);
+export const PoiEditWebGis = () => (
+	<Edit mutationMode="optimistic" resource="pois" id="0" redirect={false}>
+		<SimpleForm>
+			<TextInput source="title" />
+			<TextInput source="geom" />
+			<GeospatialInput {...raGeospatialWebGisProps} type="point" />
+		</SimpleForm>
+	</Edit>
+);
+export const PoiShow = () => (
+	<Show resource="pois" id="0">
+		<SimpleShowLayout>
+			<TextField source="id" />
+			<TextField source="title" />
+			<GeospatialShow {...raGeospatialProps} />
+		</SimpleShowLayout>
+	</Show>
+);
+export const PoiShowWebGis = () => (
+	<Show resource="pois" id="0">
+		<SimpleShowLayout>
+			<TextField source="id" />
+			<TextField source="title" />
+			<GeospatialShow {...raGeospatialWebGisProps} />
+		</SimpleShowLayout>
+	</Show>
+);

package/src/ra_components/Property.tsx

@@ -0,0 +1,42 @@
+import { Edit, SimpleForm, TextInput, Show, SimpleShowLayout, TextField } from 'react-admin';
+import GeospatialInput from '../components/GeospatialInput';
+import GeospatialShow from '../components/GeospatialShow';
+import raGeospatialProps from './raGeospatialProps';
+import raGeospatialWebGisProps from './raGeospatialWebGisProps';
+
+export const PropertyEdit = () => (
+	<Edit mutationMode="optimistic" resource="properties" id="0" redirect={false}>
+		<SimpleForm>
+			<TextInput source="title" />
+			<TextInput source="geom" />
+			<GeospatialInput {...raGeospatialProps} type="polygon" />
+		</SimpleForm>
+	</Edit>
+);
+export const PropertyEditWebGis = () => (
+	<Edit mutationMode="optimistic" resource="properties" id="0" redirect={false}>
+		<SimpleForm>
+			<TextInput source="title" />
+			<TextInput source="geom" />
+			<GeospatialInput {...raGeospatialWebGisProps} type="polygon" />
+		</SimpleForm>
+	</Edit>
+);
+export const PropertyShow = () => (
+	<Show resource="properties" id="0">
+		<SimpleShowLayout>
+			<TextField source="id" />
+			<TextField source="title" />
+			<GeospatialShow {...raGeospatialProps} />
+		</SimpleShowLayout>
+	</Show>
+);
+export const PropertyShowWebGis = () => (
+	<Show resource="properties" id="0">
+		<SimpleShowLayout>
+			<TextField source="id" />
+			<TextField source="title" />
+			<GeospatialShow {...raGeospatialWebGisProps} />
+		</SimpleShowLayout>
+	</Show>
+);

package/src/ra_components/Route.tsx

@@ -0,0 +1,42 @@
+import { Edit, Show, SimpleForm, SimpleShowLayout, TextField, TextInput } from 'react-admin';
+import GeospatialInput from '../components/GeospatialInput';
+import GeospatialShow from '../components/GeospatialShow';
+import raGeospatialProps from './raGeospatialProps';
+import raGeospatialWebGisProps from './raGeospatialWebGisProps';
+
+export const RouteEdit = () => (
+	<Edit mutationMode="optimistic" resource="routes" id="0" redirect={false}>
+		<SimpleForm>
+			<TextInput source="title" />
+			<TextInput source="geom" />
+			<GeospatialInput {...raGeospatialProps} type="line" />
+		</SimpleForm>
+	</Edit>
+);
+export const RouteEditWebGis = () => (
+	<Edit mutationMode="optimistic" resource="routes" id="0" redirect={false}>
+		<SimpleForm>
+			<TextInput source="title" />
+			<TextInput source="geom" />
+			<GeospatialInput {...raGeospatialWebGisProps} type="line" />
+		</SimpleForm>
+	</Edit>
+);
+export const RouteShow = () => (
+	<Show resource="routes" id="0">
+		<SimpleShowLayout>
+			<TextField source="id" />
+			<TextField source="title" />
+			<GeospatialShow {...raGeospatialProps} />
+		</SimpleShowLayout>
+	</Show>
+);
+export const RouteShowWebGis = () => (
+	<Show resource="routes" id="0">
+		<SimpleShowLayout>
+			<TextField source="id" />
+			<TextField source="title" />
+			<GeospatialShow {...raGeospatialWebGisProps} />
+		</SimpleShowLayout>
+	</Show>
+);

package/src/ra_components/raGeospatialProps.ts

@@ -0,0 +1,5 @@
+export default {
+	MapLibreMapProps: { options: { zoom: 14, center: [7.0851268, 50.73884] as [number, number] } },
+	embeddedMap: true,
+	source: 'geom',
+};

package/src/ra_components/raGeospatialWebGisProps.ts

@@ -0,0 +1,5 @@
+export default {
+	MapLibreMapProps: { options: { zoom: 14, center: [7.0851268, 50.73884] as [number, number] } },
+	embeddedMap: false,
+	source: 'geom',
+};

package/src/types.d.ts

@@ -1,2 +1,3 @@
-declare module "@turf/helpers";
-declare module "@turf/turf";
+declare module '@turf/helpers';
+declare module '@turf/turf';
+declare module 'wellknown';

package/tsconfig.lib.json

@@ -0,0 +1,29 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"outDir": "../../dist/out-tsc",
+		"types": [
+			"node",
+			"@nx/react/typings/cssmodule.d.ts",
+			"@nx/react/typings/image.d.ts",
+			"vite/client"
+		]
+	},
+	"exclude": [
+		"**/*.spec.ts",
+		"**/*.test.ts",
+		"**/*.spec.tsx",
+		"**/*.test.tsx",
+		"**/*.spec.js",
+		"**/*.test.js",
+		"**/*.spec.jsx",
+		"**/*.test.jsx",
+		"src/**/*.spec.ts",
+		"src/**/*.test.ts",
+		"**/*.stories.ts",
+		"**/*.stories.js",
+		"**/*.stories.jsx",
+		"**/*.stories.tsx"
+	],
+	"include": ["src/**/*", "../react-maplibre/src/**/*"]
+}

package/vite.config.ts

@@ -0,0 +1,58 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig(() => ({
+	root: __dirname,
+	cacheDir: '../../node_modules/.vite/packages/ra-geospatial',
+	plugins: [
+		react(),
+		nxViteTsPaths(),
+		nxCopyAssetsPlugin(['*.md']),
+		dts({
+			entryRoot: 'src',
+			tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+			pathsToAliases: false,
+		}),
+	],
+	// Uncomment this if you are using workers.
+	// worker: {
+	//  plugins: [ nxViteTsPaths() ],
+	// },
+	// Configuration for building your library.
+	// See: https://vitejs.dev/guide/build.html#library-mode
+	build: {
+		outDir: 'dist',
+		emptyOutDir: true,
+		reportCompressedSize: true,
+		commonjsOptions: {
+			transformMixedEsModules: true,
+		},
+		lib: {
+			// Could also be a dictionary or array of multiple entry points.
+			entry: 'src/index.ts',
+			name: '@mapcomponents/ra-geospatial',
+			fileName: 'index',
+			// Change this to the formats you want to support.
+			// Don't forget to update your package.json as well.
+			formats: ['es' as const, 'cjs' as const],
+		},
+		sourcemap: true,
+		rollupOptions: {
+			// External packages that should not be bundled into your library.
+			external: [
+				'react',
+				'react-dom',
+				'd3',
+				'sql.js',
+				/*				...Object.keys(pkg.dependencies),
+				...Object.keys(pkg.devDependencies),*/
+			],
+			input: [path.join(__dirname, 'src/index.ts')],
+		},
+	},
+}));