adjustments for heroicons2 + various small things

2025-12-13 07:46:10 +00:00 · 2023-05-22 14:22:02 +02:00 · 2023-05-22 14:22:02 +02:00 · 8d65ffa306
commit 8d65ffa306
parent 0c39ffa6f9
12 changed files with 81 additions and 75 deletions
--- 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
-<UtopiaMap
-   height='360px'
-   width='100vw'
-   center={[51.3, 9.6]}
-   zoom={6}
-   places={places}
-   events={events}
-   tags = {tags}>
-</UtopiaMap>
+      <UtopiaMap zoom={5} height='calc(100vh - 64px)' width="100%">
+        <Layer
+          name='events'
+          menuIcon='CalendarIcon'
+          menuText='add new event'
+          menuColor='#f9a825'
+          markerIcon='calendar-days-solid'
+          markerShape='square'
+          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

--- 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",
--- 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']
  }
--- 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) {
--- 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<string>("");
--- 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])
--- 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) }}>
-                                       {/**  <DynamicHeroIcon icon={layer.menuIcon} /> */}
+                                        <DynamicHeroIcon icon={layer.menuIcon} /> 
                                    </button>
                                </div>
                            </a>
--- 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 };
+export { UtopiaMap, Item, Tag, ItemsApi };
--- 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";
--- 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 */}
-      <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
--- a/src/index.tsx
+++ b/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'
--- a/src/types.ts
+++ b/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 {
-  getAll(): Promise<void>,
-  add(item : Item): Promise<void>,
-  update(item : Item): Promise<void>,
-  remove(id : number): Promise<void>,
+export interface ItemsApi {
+  getItems(): Promise<void>,
+  addItem(item : Item): Promise<void>,
+  updateItem(item : Item): Promise<void>,
+  deleteItem(id : number): Promise<void>,
 }