adjustments for heroicons2 + various small things

README.md

@@ -8,8 +8,8 @@ Check [utopia-os.org](https://utopia-os.org) for more information
 Utopia UI is the approach to create a Open Source Library of JavaScript Components which should bring useful maps and apps to all kind of projects and communities.
 
 
-## Map UI Component
+## Map Component
-The Map Component based on [leaflet](https://leafletjs.com) is the crystalisation point of Utopia OS.
+The Map Component based on [leaflet](https://leafletjs.com)
 
 The map shows places, events and people at their respective position whith nice and informative Popups. Tags, colors and clusters help to retain the overview.
 
@@ -30,15 +30,27 @@ import UtopiaMap from 'utopia-ui'
 
 use the Map UI Component
 ```jsx
-<UtopiaMap
+      <UtopiaMap zoom={5} height='calc(100vh - 64px)' width="100%">
-   height='360px'
+        <Layer
-   width='100vw'
+          name='events'
-   center={[51.3, 9.6]}
+          menuIcon='CalendarIcon'
-   zoom={6}
+          menuText='add new event'
-   places={places}
+          menuColor='#f9a825'
-   events={events}
+          markerIcon='calendar-days-solid'
-   tags = {tags}>
+          markerShape='square'
-</UtopiaMap>
+          markerDefaultColor='#777'
+          data={events} />
+        <Layer
+          name='places'
+          menuIcon='MapPinIcon'
+          menuText='add new place'
+          menuColor='#2E7D32'
+          markerIcon='circle-solid'
+          markerShape='circle'
+          markerDefaultColor='#777'
+          data={places} />
+        <Tags data={tags}></Tags>
+      </UtopiaMap>
 ```
 You can find some Sample Data (places, events, tags) for test purpose below
 

package-lock.json

@@ -572,6 +572,15 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -930,15 +939,6 @@
         "source-map": "^0.6.1"
       }
     },
-    "node_modules/concat-with-sourcemaps/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1004,15 +1004,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/css-tree/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -1570,15 +1561,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/eslint/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -1723,18 +1705,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4252,6 +4222,15 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -4320,6 +4299,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",

rollup.config.js

@@ -18,5 +18,5 @@ export default {
       }),
       typescript()
     ],
-    external: ['react', 'react-dom', 'leaflet', 'react-leaflet', 'react-leaflet-cluster', 'leaflet/dist/leaflet.css', '@heroicons/react/solid']
+    external: ['react', 'react-dom', 'leaflet', 'react-leaflet', 'react-leaflet-cluster', 'leaflet/dist/leaflet.css', '@heroicons/react/20/solid']
   }

src/Components/AppShell/Content.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 type ContentProps = {
-  children?: React.ReactNode
+  children?: React.ReactNode;
 }
 
 export function Content({children} : ContentProps) {

src/Components/AppShell/NavBar.tsx

@@ -6,8 +6,6 @@ import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon
 import * as React from "react";
 
 
-
-
 export default function NavBar({name, useAuth} : {name: string, useAuth : any}) {
 
   const [email, setEmail] = useState<string>("");

src/Components/Map/Layer.tsx

@@ -30,14 +30,12 @@ export const Layer = (props: LayerProps) => {
     const resetItems = useResetItems();
 
     useEffect(() => {
-        
         resetItems(props);
-        props.data.map(item => {
+        props.data?.map(item => {
             if(item.position) {
                 item.layer = props;
                 addItem(item);
             }   
-            
         })
         addLayer(props);
     }, [props.data])

src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-//import {DynamicHeroIcon} from '../../../Utils/DynamicHeroIcon'
+import DynamicHeroIcon from '../../../Utils/DynamicHeroIcon'
 import { useLayers } from '../hooks/useLayers'
 
 
@@ -25,7 +25,7 @@ export default function AddButton({setSelectMode} : {setSelectMode: React.Dispat
                                         className="tw-z-500  tw-border-0 tw-pl-2 tw-p-0 tw-mb-2 tw-mt-2 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none"
                                         style={{ backgroundColor: layer.menuColor }}
                                         onClick={() => { setSelectMode(layer) }}>
-                                       {/**  <DynamicHeroIcon icon={layer.menuIcon} /> */}
+                                        <DynamicHeroIcon icon={layer.menuIcon} /> 
                                     </button>
                                 </div>
                             </a>

src/Components/Map/UtopiaMap.tsx

@@ -1,7 +1,7 @@
 import { TileLayer, MapContainer, useMapEvents } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as React from "react";
-import { Item, Tag, API, Layer, UtopiaMap as UtopiaMapProps } from "../../types"
+import { Item, Tag, ItemsApi, Layer, UtopiaMap as UtopiaMapProps } from "../../types"
 import "./UtopiaMap.css"
 import { LatLng } from "leaflet";
 import MarkerClusterGroup from 'react-leaflet-cluster'
@@ -33,6 +33,7 @@ function MapEventListener(props: MapEventListenerProps) {
     return null
 }
 
+/** This is a description of the foo function. */
 function UtopiaMap({
     height = "500px",
     width = "100%",
@@ -84,4 +85,4 @@ function UtopiaMap({
     );
 }
 
-export { UtopiaMap, Item, Tag, API };
+export { UtopiaMap, Item, Tag, ItemsApi };

src/Components/Map/index.tsx

@@ -1,3 +1,3 @@
-export { UtopiaMap, Item, Tag, API } from './UtopiaMap'
+export { UtopiaMap, Item, Tag, ItemsApi } from './UtopiaMap'
 export { Layer } from './Layer';
 export { Tags } from "./Tags";

src/Utils/DynamicHeroIcon.tsx

@@ -3,18 +3,24 @@
 // by: Mike Summerfeldt (IT-MikeS - https://github.com/IT-MikeS)
 
 import { FC } from 'react'
-import * as HIcons from '@heroicons/react/solid'
+import * as HIcons from '@heroicons/react/20/solid'
 import * as React from 'react'
 
-export const DynamicHeroIcon: FC<{icon: string}> = (props) => {
+const DynamicHeroIcon: FC<{icon: string}> = (props) => {
   const {...icons} = HIcons
-  // @ts-ignore
+  
   const TheIcon: JSX.Element = icons[props.icon]
 
+  if(!TheIcon) {
+    console.log(`Icon ${props.icon} doesn't exist`);
+  } 
+
   return (
     <>
       {/* @ts-ignore */}
-      <TheIcon className="h-6 w-6 text-white" aria-hidden="true" />
+      <TheIcon className="tw-h-6 tw-w-6 tw-text-white" aria-hidden="true" /> 
     </>
   )
 }
+
+export default DynamicHeroIcon

src/index.tsx

@@ -1,4 +1,4 @@
-export { UtopiaMap, Layer, Tags, Item, Tag, API } from './Components/Map/index';
+export { UtopiaMap, Layer, Tags, Item, Tag, ItemsApi } from './Components/Map/index';
 export {AppShell, Content, SideBar} from "./Components/AppShell"
 export {AuthProviderDirectus, useAuthDirectus} from "./Components/Auth"
 export {Settings} from './Components/Profile'

src/types.ts

@@ -8,11 +8,10 @@ export interface UtopiaMap {
   zoom?: number,
   tags?: Tag[],
   children?: React.ReactNode,
-  api?: API
 }
 
 export interface Layer {
-  data: Item[],
+  data?: Item[],
   children?: React.ReactNode
   name: string,
   menuIcon: string,
@@ -22,6 +21,7 @@ export interface Layer {
   markerShape: string,
   markerDefaultColor: string,
   tags?: Tag[],
+  api?: ItemsApi,
   setNewItemPopup?: React.Dispatch<React.SetStateAction<NewItemPopupProps | null>>
 }
 
@@ -60,9 +60,9 @@ export interface Tag {
   name: string;
 }
 
-export interface API {
+export interface ItemsApi {
-  getAll(): Promise<void>,
+  getItems(): Promise<void>,
-  add(item : Item): Promise<void>,
+  addItem(item : Item): Promise<void>,
-  update(item : Item): Promise<void>,
+  updateItem(item : Item): Promise<void>,
-  remove(id : number): Promise<void>,
+  deleteItem(id : number): Promise<void>,
 }