updated to utopia-ui@3.0.0-alpha-4

package-lock.json

@@ -1,20 +1,20 @@
 {
-  "name": "the-game",
+  "name": "utopia-game",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "the-game",
+      "name": "utopia-game",
       "version": "0.0.0",
       "dependencies": {
-        "@directus/sdk": "^10.3.3",
+        "@directus/sdk": "^11.0.1",
         "@heroicons/react": "^2.0.17",
         "@types/geojson": "^7946.0.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.11.2",
-        "utopia-ui": "^3.0.0-alpha.0"
+        "utopia-ui": "^3.0.0-alpha.4"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -390,11 +390,25 @@
       }
     },
     "node_modules/@directus/sdk": {
-      "version": "10.3.3",
+      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-10.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-11.0.1.tgz",
-      "integrity": "sha512-58gw+QjkuIr0lJFRx5HwSp1ewAf7rjfV++eJqAmC13p7vif9wfJEcWcJwqXstYdvtJVUg+nB4O/CE0OBEtp5HQ==",
+      "integrity": "sha512-3WTmYeFZD8uyCkSB7TL2qgFVL8x6D+Z2SdR33xXNEPpld4625ZoQzOTa3oYCC7AREkh7x6vdP9wXkY91oQ8x1g==",
       "dependencies": {
-        "axios": "^0.27.2"
+        "@directus/types": "10.1.3"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/directus/directus?sponsor=1"
+      }
+    },
+    "node_modules/@directus/types": {
+      "version": "10.1.3",
+      "resolved": "https://registry.npmjs.org/@directus/types/-/types-10.1.3.tgz",
+      "integrity": "sha512-2n2VTfFVzHYWwTxznOTbEsQUbCy/XIlpmiYt2HU3tqZe2cQiu+z5Sw+7YsdfDTmVjW78J20MdoweSjyHheqp6A==",
+      "funding": {
+        "url": "https://github.com/directus/directus?sponsor=1"
       }
     },
     "node_modules/@esbuild/android-arm": {
@@ -1318,20 +1332,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
-    },
-    "node_modules/axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
-      "dependencies": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1517,17 +1517,6 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1614,14 +1603,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/detect-autofill": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz",
@@ -2137,38 +2118,6 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
-      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2347,9 +2296,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.12.1",
+      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
-      "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -2400,9 +2349,9 @@
       "dev": true
     },
     "node_modules/jiti": {
-      "version": "1.19.1",
+      "version": "1.19.3",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.3.tgz",
-      "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
+      "integrity": "sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==",
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -2570,25 +2519,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2952,6 +2882,16 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -3014,6 +2954,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-leaflet": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
@@ -3112,11 +3057,11 @@
       }
     },
     "node_modules/resolve": {
-      "version": "1.22.2",
+      "version": "1.22.4",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
-      "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==",
+      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
       "dependencies": {
-        "is-core-module": "^2.11.0",
+        "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -3482,9 +3427,9 @@
       }
     },
     "node_modules/tw-elements": {
-      "version": "1.0.0-beta2",
+      "version": "1.0.0-beta3",
-      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-beta2.tgz",
+      "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.0.0-beta3.tgz",
-      "integrity": "sha512-0DAm5i7OSk1NCW9i/JotHZOWG0NIuCBr5S0t1h66rDgH1M2fxCQvvQw3AxK0fVaCJG0jk82UhAsI7PCEMoq6Xw==",
+      "integrity": "sha512-fz4zIsetP4KGDjMXWWpcUs8avteMnSu8ilGvo8LGgixeIlcwl2ZEOpK93HfVFYmTCO4N0YdpZ5quNNom67xxFw==",
       "dependencies": {
         "@popperjs/core": "^2.6.0",
         "chart.js": "^3.7.1",
@@ -3577,12 +3522,13 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/utopia-ui": {
-      "version": "3.0.0-alpha.0",
+      "version": "3.0.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.0.tgz",
+      "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.0-alpha.4.tgz",
-      "integrity": "sha512-NUCuVnijcnuXGXYacj1bDOJojjvyqZ/iZ/L0+i92LovZ7P793462U4DRHD6nPQdS0XlVyQwRJX9n++aqophw2A==",
+      "integrity": "sha512-DoTGrYfPZ+KsTKp19ixL7Mjm5vGjd+J6GUVh1M238mKgMwnIed5joMY3Z0wQlU+bxIw/3hC3iSZbkegKiODFhw==",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
-        "leaflet": "^1.9.3",
+        "leaflet": "^1.9.4",
+        "prop-types": "^15.8.1",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-router-dom": "^6.11.2",

package.json

@@ -10,13 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@directus/sdk": "^10.3.3",
+    "@directus/sdk": "^11.0.1",
     "@heroicons/react": "^2.0.17",
     "@types/geojson": "^7946.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
-    "utopia-ui": "^3.0.0-alpha.0"
+    "utopia-ui": "^3.0.0-alpha.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/App.tsx

@@ -1,30 +1,36 @@
-import { AppShell, SideBar, Content, AuthProviderDirectus, useAuthDirectus, Settings, Modal, Quests } from 'utopia-ui'
+import { AppShell, SideBar, Content, AuthProvider, useAuth, Settings, Modal, Quests, LoginPage, SignupPage } from 'utopia-ui'
 import { routes } from './routes/sidebar'
 import { Route, Routes } from 'react-router-dom'
 import MapContainer from "./pages/MapContainer"
 import './App.css'
-import { directus } from './api/directus'
+import Concept from './pages/Concept'
+import { userApi } from './api/userApi'
 
 
 function App() {
 
+
+
   return (
 
     <div className="App overflow-x-hidden">
 
-      <AuthProviderDirectus directus={directus}>
+      <AuthProvider userApi={new userApi}>
-        <Modal />
+        <AppShell appName="Utopia Game" useAuth={useAuth}>
-        <AppShell name="Utopia Game" useAuth={useAuthDirectus}>
+        <Modal/>
           <SideBar routes={routes} />
           <Content>
             <Quests />
             <Routes>
               <Route path="/" element={<MapContainer />} />
-              <Route path="/settings" element={<Settings useAuth={useAuthDirectus} />} />
+              <Route path="/settings" element={<Settings useAuth={useAuth} />} />
+              <Route path="/concept" element={<Concept/>} />
+              <Route path="/login" element={<LoginPage/>} />
+              <Route path="/signup" element={<SignupPage/>} />
             </Routes>
           </Content>
         </AppShell>
-      </AuthProviderDirectus>
+      </AuthProvider>
     </div>
   )
 }

src/api/directus.ts

@@ -1,6 +1,8 @@
-import { Directus } from "@directus/sdk"
+import { createDirectus, rest, authentication, AuthenticationData, AuthenticationStorage } from '@directus/sdk';
 import { Point } from 'geojson'
 
+
+
 export type Place = {
     id: string;
     name: string;
@@ -17,10 +19,39 @@ export type Place = {
     end: Date;
   };
 
-  type MyCollections = {
+  export type MyCollections = {
     places: Place;
     events: Event;
   };
   
   
-  export const directus = new Directus<MyCollections>("https://map.api.free-planet-earth.org/");
+
+  export const authLocalStorage = (mainKey: string = "directus_storage") => ({
+    // implementation of get, here return json parsed data from localStorage at mainKey (or null if not found)
+    get: async () => {
+        const data = window.localStorage.getItem(mainKey);
+        if (data) {
+          return JSON.parse(data);
+        }
+        return null;
+      },
+    // implementation of set, here set the value at mainKey in localStorage, or remove it if value is null
+    set: async (value: AuthenticationData | null) => {
+        if (!value) {
+          return window.localStorage.removeItem(mainKey);
+        }
+        return window.localStorage.setItem(mainKey, JSON.stringify(value));
+      },
+   } as AuthenticationStorage);
+   
+   export async function getRefreshToken(){
+    let auth = await authLocalStorage().get()
+    return auth!.refresh_token;
+}
+
+  export const directusClient = createDirectus<MyCollections>("https://map.api.free-planet-earth.org/")
+  .with(authentication())
+  .with(rest())
+  .with(authentication('json', { // add this if you want to use authentication, json is important, it's type of your authentication usage, here JWT
+    storage: authLocalStorage(), // here set the storage previously created
+  }));

src/api/itemsApi.ts

@@ -1,41 +1,44 @@
-import {  directus } from './directus';
+import { createItem, deleteItem, readItems, updateItem } from '@directus/sdk';
+import {  MyCollections, directusClient } from './directus';
+import { ItemsApi } from 'utopia-ui/dist/types';
 
 
-export class itemsApi<T> {
 
-  name : string;
+export class itemsApi<T> implements ItemsApi<T>{
 
-  constructor(name : string) {
+  collectionName : string;
-    this.name = name;
+
+  constructor(collectionName : string) {
+    this.collectionName = collectionName;
   }
 
   async getItems() {
     try {
-      return await directus.items(this.name).readByQuery({limit: -1 });
+      return await directusClient.request(readItems(this.collectionName as never,{limit: 500 }));
     } catch (error) {
       console.log(error);
     }
   }
 
-  async createItem(item: T & { id?: number }) {
+  async createItem(item: T & { id?: string }) {
     try {
-      return await directus.items(this.name).createOne(item)
+      return await directusClient.request(createItem(this.collectionName as keyof MyCollections,item))
     } catch (error) {
       console.log(error);
     }
   }
 
-  async updateItem(item: T & { id?: number }) {
+  async updateItem(item: T & { id?: string }) {
     try {
-      return await directus.items(this.name).updateOne(item.id!, item)
+      return await directusClient.request(updateItem(this.collectionName as keyof MyCollections,item.id!, item))
     } catch (error) {
       console.log(error);
     }
   }
 
-  async deleteItem(id: number ) {
+  async deleteItem(id: string ) {
     try {
-      return await directus.items(this.name).deleteOne(id)
+      return await directusClient.request(deleteItem(this.collectionName as keyof MyCollections,id))
     } catch (error) {
       console.log(error);
     }

src/api/userApi.ts

@@ -0,0 +1,72 @@
+import { createUser, readMe, updateMe} from '@directus/sdk';
+import {  directusClient } from './directus';
+import { UserApi, UserItem } from 'utopia-ui/dist/types';
+
+
+export class userApi implements UserApi {
+
+  async register(email: string, password: string, userName: string): Promise<any> {
+    try {
+      return await directusClient.request(createUser({email: email, password: password, first_name: userName}));
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  async login(email: string, password: string): Promise<any> {
+    try {
+      return await directusClient.login(email,password,{mode: 'json'});
+    } catch (error) {
+      console.log(error);
+      throw new Error("Failed while logging User in");
+    }
+  }
+  async logout(): Promise<any> {
+    try {
+      return await directusClient.logout();
+    } catch (error) {
+      console.log(error);
+      throw new Error("Failed while logging User out");
+    }
+  }
+  async getUser(): Promise<any> {
+    try {
+      let user = await directusClient.request(readMe());
+      return user;
+    } catch (error) {    
+      console.log(error);
+      throw new Error("Failed while loading User");
+    }
+  }
+
+    async getToken(): Promise<any> {
+    try {
+    const token = await directusClient.getToken();
+      return token;
+    } catch (error) {
+      console.log(error);
+      throw new Error("Failed while loading User Token");
+    }
+  }
+
+  async updateUser(user: UserItem): Promise<any> {
+    const { id, ...userRest } = user;
+    try {
+      const res = await directusClient.request(updateMe(userRest))
+      return res as any;
+    } catch (error: any) {
+      console.log(error);
+      throw new Error("Failed while updating User Profile");
+    }
+  }
+
+}
+
+
+
+
+
+
+
+
+

src/pages/Concept.tsx

@@ -0,0 +1,31 @@
+import { CardPage } from "utopia-ui"
+
+
+export default function Concept() {
+    return (
+        <CardPage title="Concept">
+            <p>Utopia Game ist ein kooperatives Real-Life-Manifestations-Adventure-Game das Menschen zusammenbringt die gemeinsam aktiv die Welt gestalten wollen. </p>
+            <br></br>
+            <h2 className="tw-text-xl">Ziel des Spiels</h2>
+            <br></br>
+            <ul>
+                <li>1. Ein globales dezentrales Netzwerk aufspannen</li>
+                <li>2. Aufbau kollektiver Strukturen und Co-Kreation</li>
+                <li>3. Freie Entfaltung unserer individuellen und kollektiven Potentiale</li>
+            </ul>
+            <br></br>
+            <h2 className="tw-text-xl">Ablauf</h2>
+            <br></br>
+            <p>Der Spieler motiviert und angeleitet ... </p>
+            <br></br>
+            <ul>
+                <li>1. sich mit sich selbst und seinen Fähigkeiten sowie tieferen Wünschen und Visionen auseinander zu setzen und sein Charakter bzw. <b>Spieler-Profil</b> zu definieren</li>
+                <li>2. sich mit anderen Menschen im echten Leben zu connecten und sein persönliches Netzwerk bzw. <b>Web of Trust</b> aufzubauen</li>
+                <li>3. die eigenen <b>Ressourcen zu teilen</b> und die des Netzwerks zu nutzen</li>
+                <li>4. sich verschiedenen <b>Projekten</b> anzuschließen und selbst welche zu starten</li>
+                <li>5. die neu entstehende Welt zu <b>kartieren und zu dokumentieren</b></li>
+
+            </ul>
+        </CardPage>
+    )
+}

src/pages/MapContainer.tsx

@@ -1,4 +1,4 @@
-import { UtopiaMap, Tags, Layer } from 'utopia-ui'
+import { UtopiaMap, Tags, Layer, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, TextView, StartEndView } from 'utopia-ui'
 import { tags } from './data'
 import { itemsApi } from '../api/itemsApi'
 import { Place, Event } from '../api/directus';
@@ -36,7 +36,17 @@ function MapContainer() {
         markerDefaultColor='#777'
         //     data={events}
         api={eventsApi}
- />
+      >
+        <ItemForm>
+          <PopupStartEndInput></PopupStartEndInput>
+          <PopupTextAreaInput dataField='text' placeholder={'Test'} style="tw-h-40"></PopupTextAreaInput>
+        </ItemForm>
+        <ItemView>
+          <StartEndView></StartEndView>
+          <TextView></TextView>
+        </ItemView>
+
+      </Layer>
       <Layer
         name='places'
         menuIcon='MapPinIcon'

src/pages/data.ts

@@ -1,4 +1,4 @@
-import {Item, Tag} from "utopia-ui"
+import { Item, Tag } from "utopia-ui/dist/types";
 
 export const tags : Tag[] = [
 	{

src/routes/sidebar.tsx

@@ -15,9 +15,9 @@ export const routes = [
     name: 'Map',
   },
   {
-    path: '/groups', // url
+    path: '/concept', // url
     icon: <UserGroupIcon style={{width: 24 }}/>, // icon component
-    name: 'Groups', // name that appear in Sidebar
+    name: 'Concept', // name that appear in Sidebar
   },
 
 

tsconfig.json

@@ -19,6 +19,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "../utopia-ui/src/Components/Templates/CardPage.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }