@mapcomponents/ra-geospatial 1.5.3 → 1.5.5

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,142 @@
+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,41 @@
+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,97 @@
+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')(({ theme }) => ({
+	display: 'flex',
+	flexDirection: 'column',
+	zIndex: 1,
+	minHeight: '100%',
+	position: 'relative',
+	backgroundColor: 'transparent',
+	pointerEvents: 'none',
+}));
+
+const AppFrame = styled('div')(({ theme }) => ({
+	display: 'flex',
+	flexDirection: 'column',
+}));
+
+const ContentWithSidebar = styled('main')(({ theme }) => ({
+	display: 'flex',
+	flexGrow: 1,
+	marginTop: '3em',
+}));
+
+const Content = styled('div')(({ theme }) => ({
+	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)(({ theme }) => ({
+	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.json

@@ -1,103 +1,9 @@
 {
-  "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig to read more about this file */
-
-    /* Projects */
-    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
-    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
-    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
-    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
-    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
-    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
-    /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "react",                                /* Specify what JSX code is generated. */
-    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
-    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
-    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
-    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
-    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
-    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
-    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
-    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
-    "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
-    /* Modules */
-    "module": "ES2015",                                /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "node16",                       /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
-    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
-    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
-    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
-    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
-    // "resolveJsonModule": true,                        /* Enable importing .json files. */
-    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
-    /* JavaScript Support */
-    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
-    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
-    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
-    /* Emit */
-     "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
-     "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
-    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
-    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
-    // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
-    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
-    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
-    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
-    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
-    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
-    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
-    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
-    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
-    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
-    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
-    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
-    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
-    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
-    /* Interop Constraints */
-    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
-    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
-    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
-    /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
-    /* Completeness */
-    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
+	"include": [],
+	"references": [
+		{
+			"path": "./tsconfig.lib.json"
+		}
+	],
+	"extends": "../../tsconfig.base.json"
 }

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/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,49 @@
+/// <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/libs/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/libs/ra-geospatial',
+		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],
+		},
+		rollupOptions: {
+			// External packages that should not be bundled into your library.
+			external: ['react', 'react-dom', 'react/jsx-runtime'],
+		},
+	},
+}));