diff --git a/README.md b/README.md index 43273bc3..1d46de55 100644 --- a/README.md +++ b/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 -The Map Component based on [leaflet](https://leafletjs.com) is the crystalisation point of Utopia OS. +## Map Component +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 - - + + + + + ``` You can find some Sample Data (places, events, tags) for test purpose below diff --git a/package-lock.json b/package-lock.json index 4bd81d07..ec0770bd 100644 --- a/package-lock.json +++ b/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", diff --git a/rollup.config.js b/rollup.config.js index f81a6557..643e2423 100644 --- a/rollup.config.js +++ b/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'] } \ No newline at end of file diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx index d012028d..b409aede 100644 --- a/src/Components/AppShell/Content.tsx +++ b/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) { diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index b378a4b5..6fff24c6 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/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(""); diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index c44278bc..13344ad7 100644 --- a/src/Components/Map/Layer.tsx +++ b/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]) diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx index be60b4b6..bd2fc699 100644 --- a/src/Components/Map/Subcomponents/AddButton.tsx +++ b/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) }}> - {/** */} + diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index 7acc4b08..7200741d 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/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 }; \ No newline at end of file +export { UtopiaMap, Item, Tag, ItemsApi }; \ No newline at end of file diff --git a/src/Components/Map/index.tsx b/src/Components/Map/index.tsx index fe7474ca..48a63634 100644 --- a/src/Components/Map/index.tsx +++ b/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"; \ No newline at end of file diff --git a/src/Utils/DynamicHeroIcon.tsx b/src/Utils/DynamicHeroIcon.tsx index ede54744..e0531913 100644 --- a/src/Utils/DynamicHeroIcon.tsx +++ b/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 */} -