utopia-ui 3.0.1 → 3.0.3

package/README.md

@@ -10,7 +10,7 @@ Utopia UIs mission is to provide open source building blocks to create beautiful
 
 The building blocks are designed to allow different networks and communities to assemble their map and app for their specific needs and purpose.
 
-Utopia Game is the first app made with Utopia UI. It is an attempt to use gamification to get users to take action and make the map even more alive. Check it out at [utopia-game.org](https://utopia-game.org/) or see the code in the [repository](https://github.com/utopia-os/utopia-game)
+Utopia Game is one of the apps made with Utopia UI. It is an attempt to use gamification to get users to take action and make the map even more alive. Check it out at [utopia-game.org](https://utopia-game.org/) or see the code in the [repository](https://github.com/utopia-os/utopia-game)
 
 ## Features
 
@@ -23,44 +23,108 @@ Utopia Game is the first app made with Utopia UI. It is an attempt to use gamifi
 
 ## Getting Started
 
+### Basic Map
+In this tutorial we learn how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library.
 
-install via npm
-```bash
- npm install utopia-ui
+For this tutorial we use Vite to create an empty React app called "utopia-static-map"
+
+```shell
+npm create vite@latest utopia-static-map -- --template react
 ```
 
-## Map Component
-The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.
+We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package
 
-Tags, colors and clusters help to retain the overview.
+```shell
+cd utopia-static-map
+npm install utopia-ui
+```
+
+We open our `src/App.jsx` and we replace the content with
 
-use the Map UI Component
 ```jsx
-import { UtopiaMap, Layer} from 'utopia-ui'
+import { UtopiaMap } from "utopia-ui"
+
+function App() {
+  return (
+    <UtopiaMap center={[50.6, 9.5]} zoom={5} height='100dvh' width="100dvw">
+    </UtopiaMap>
+  )
+}
+
+export default App
+
+```
+
+Then we start the development server to check out the result in our browser:
+
+```shell
+npm run dev
+```
+
+And can open our first map app in the browser 🙂
+
+### Static Layers
+
+Now we add some static layer.
+
+First we put some sample data in a new file called `src/sample-data.js`
+
+```javascript
+export const places = [{
+    "id": 51,
+    "name": "Stadtgemüse",
+    "text": "Stadtgemüse Fulda ist eine Gemüsegärtnerei in Maberzell, die es sich zur Aufgabe gemacht hat, die Stadt und seine Bewohner:innen mit regionalem, frischem und natürlich angebautem Gemüse mittels Gemüsekisten zu versorgen. Es gibt also jede Woche, von Frühjahr bis Herbst, angepasst an die Saison eine Kiste mit schmackhaftem und frischem Gemüse für euch, welche ihr direkt vor Ort abholen könnt. \r\n\r\nhttps://stadtgemuese-fulda.de",
+    "position": { "type": "Point", "coordinates": [9.632435, 50.560342] },
+  },
+  {
+    "id": 166,
+    "name": "Weidendom",
+    "text": "free camping",
+    "position": { "type": "Point", "coordinates": [9.438793, 50.560112] },
+  }];
+  
+  export const events = [
+    {
+      "id": 423,
+      "name": "Hackathon",
+      "text": "still in progress",
+      "position": { "type": "Point", "coordinates": [10.5, 51.62] },
+      "start": "2022-03-25T12:00:00",
+      "end": "2022-05-12T12:00:00",
+    }
+  ]
+```
+
+We want to create two Layers. One we want to call *Places* and the other *Events*
 
-    <UtopiaMap zoom={5} height='100dvh' width="100dvw">
+we import our sample data to the `src/App.jsx`
+
+```jsx
+import { events, places } from "./sample-data"
+```
+and than we create our two `<Layer>` inside of our `<UtopiaMap>` component
+```jsx
+    <UtopiaMap center={[50.6, 15.5]} zoom={5} height='100dvh' width="100dvw">
       <Layer
         name='events'
-        menuIcon='CalendarIcon'
-        menuText='add new event'
-        menuColor='#f9a825'
         markerIcon='calendar'
         markerShape='square'
-        markerDefaultColor='#777'
+        markerDefaultColor='#700'
         data={events} />
       <Layer
         name='places'
-        menuIcon='MapPinIcon'
-        menuText='add new place'
-        menuColor='#2E7D32'
         markerIcon='point'
         markerShape='circle'
-        markerDefaultColor='#777'
+        markerDefaultColor='#007'
         data={places} />
     </UtopiaMap>
+
 ```
-You can find some Sample Data (places, events, tags) for test in the `SamleData/` folder
 
+## Map Component
+The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.
+
+Tags, colors and clusters help to retain the overview.
 
 
 ### Map Options
@@ -90,4 +154,4 @@ You can find some Sample Data (places, events, tags) for test in the `SamleData/
 
 <a href="https://opencollective.com/utopia-project">
     <img width="300" src="https://opencollective.com/utopia-project/donate/button@2x.png?color=blue" />
-</a>
+</a>

package/dist/Components/AppShell/SideBar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare type route = {
     path: string;
     icon: JSX.Element;

package/dist/Components/AppShell/SidebarSubmenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare function SidebarSubmenu({ submenu, name, icon }: {
     path: string;
     icon: JSX.Element;

package/dist/Components/Auth/useAuth.d.ts

@@ -14,10 +14,10 @@ declare type AuthContextProps = {
     user: UserItem | null;
     login: (credentials: AuthCredentials) => Promise<UserItem | undefined>;
     register: (credentials: AuthCredentials, userName: string) => Promise<UserItem | undefined>;
-    loading: Boolean;
+    loading: boolean;
     logout: () => Promise<any>;
     updateUser: (user: UserItem) => any;
-    token: String | null;
+    token: string | null;
     requestPasswordReset: (email: string, reset_url: string) => Promise<any>;
     passwordReset: (token: string, new_password: string) => Promise<any>;
 };

package/dist/Components/Map/hooks/useClusterRef.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 declare type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>;
 declare function useClusterRefManager(): {
     clusterRef: any;

package/dist/Components/Map/hooks/useSelectPosition.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { Item, LayerProps } from '../../../types';
 import { LatLng } from "leaflet";
 import { ItemFormPopupProps } from "../Subcomponents/ItemFormPopup";

package/dist/Components/Profile/Templates/OnepagerForm.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { Item, Tag } from "../../../types";
 export declare const OnepagerForm: ({ item, state, setState }: {
     state: {

package/dist/Components/Profile/Templates/OnepagerView.d.ts

@@ -1,4 +1,4 @@
-import { Item } from "utopia-ui/dist/types";
+import { Item } from "../../../types";
 export declare const OnepagerView: ({ item, userType }: {
     item: Item;
     userType: string;

package/dist/Components/Profile/Templates/TabsView.d.ts

@@ -1,4 +1,4 @@
-import { Item, Tag } from 'utopia-ui/dist/types';
+import { Item, Tag } from '../../../types';
 export declare const TabsView: ({ attestations, userType, item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem, setUrlParams }: {
     attestations: Array<any>;
     userType: string;

package/dist/Components/Profile/itemFunctions.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 export declare const submitNewItem: (evt: any, type: string, item: any, user: any, setLoading: any, tags: any, addTag: any, addItem: any, linkItem: any, resetFilterTags: any, layers: any, addItemPopupType: any, setAddItemPopupType: any) => Promise<void>;
 export declare const linkItem: (id: string, item: any, updateItem: any) => Promise<void>;
 export declare const unlinkItem: (id: string, item: any, updateItem: any) => Promise<void>;

package/dist/Components/Templates/TagView.d.ts

@@ -2,6 +2,6 @@ import { Tag } from '../../types';
 export declare const TagView: ({ tag, heighlight, onClick, count }: {
     tag: Tag;
     heighlight?: boolean | undefined;
-    onClick?: ((e: any) => void) | undefined;
+    onClick?: (() => void) | undefined;
     count?: number | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Utils/Moon.d.ts

@@ -1,4 +1,4 @@
-export declare const LUNAR_MONTH: number;
+export declare const LUNAR_MONTH = 29.530588853;
 export declare const getJulianDate: (date?: Date) => number;
 export declare const normalize: (value: number) => number;
 export declare const getLunarAgePercent: (date?: Date) => number;