utopia-ui 3.0.35 → 3.0.36

package/README.md

@@ -26,103 +26,13 @@ It is the base of [Utopia Map](https://github.com/utopia-os/utopia-map) and [Uto
 
 ## 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.
-
-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
-```
-
-We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package
-
-```shell
-cd utopia-static-map
-npm install utopia-ui
-```
-
-We open our `src/App.jsx` and we replace the content with
-
-```jsx
-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 content in two 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*
-
-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'
-        markerIcon='calendar'
-        markerShape='square'
-        markerDefaultColor='#700'
-        data={events} />
-      <Layer
-        name='places'
-        markerIcon='point'
-        markerShape='circle'
-        markerDefaultColor='#007'
-        data={places} />
-    </UtopiaMap>
-
-```
+1. If you want to use **Utopia UI** in your project, check out [`/exampes`](/examples) to see how to use its components.
+
+2. If you like to contribute to our library, see the [Contribution Guide](/CONTRIBUTING.md) to see how to setup a development environment on your local machine.
+
+## Components
+
+![Utopia UI Components](Components.svg)
 
 ## Map Component
 The map shows various Layers (like places, events, profiles ...) of Items at their respective position whith nice and informative Popup and Profiles.

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type ContentProps = {
+type ContentProps = {
     children?: React.ReactNode;
 };
 export declare function Content({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;

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

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

package/dist/Components/AppShell/hooks/useAppState.d.ts

@@ -4,7 +4,7 @@ interface AppState {
     assetsApi: AssetsApi;
     userType: string;
 }
-declare type UseAppManagerResult = ReturnType<typeof useAppManager>;
+type UseAppManagerResult = ReturnType<typeof useAppManager>;
 declare function useAppManager(): {
     state: AppState;
     setAppState: (newState: Partial<AppState>) => void;

package/dist/Components/AppShell/hooks/useAssets.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { AssetsApi } from '#types/AssetsApi';
-declare type UseAssetManagerResult = ReturnType<typeof useAssetsManager>;
+type UseAssetManagerResult = ReturnType<typeof useAssetsManager>;
 declare function useAssetsManager(): {
     api: AssetsApi;
     setAssetsApi: (api: AssetsApi) => void;

package/dist/Components/Gaming/hooks/useQuests.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type UseQuestManagerResult = ReturnType<typeof useQuestsManager>;
+type UseQuestManagerResult = ReturnType<typeof useQuestsManager>;
 declare function useQuestsManager(initialOpen: boolean): {
     open: boolean;
     setQuestsOpen: (open: boolean) => void;

package/dist/Components/Input/SelectBox.d.ts

@@ -1,4 +1,4 @@
-declare type SelectBoxProps = {
+type SelectBoxProps = {
     labelTitle?: string;
     labelStyle?: string;
     type?: string;

package/dist/Components/Input/TextAreaInput.d.ts

@@ -1,4 +1,4 @@
-declare type TextAreaProps = {
+type TextAreaProps = {
     labelTitle?: string;
     labelStyle?: string;
     containerStyle?: string;

package/dist/Components/Input/TextInput.d.ts

@@ -1,4 +1,4 @@
-declare type InputTextProps = {
+type InputTextProps = {
     labelTitle?: string;
     labelStyle?: string;
     type?: string;

package/dist/Components/Map/UtopiaMap.d.ts

@@ -1,4 +1,4 @@
 import type { UtopiaMapProps } from '#types/UtopiaMapProps';
 import 'react-toastify/dist/ReactToastify.css';
-declare function UtopiaMap(props: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
+declare function UtopiaMap({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, infoText, }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
 export { UtopiaMap };

package/dist/Components/Map/UtopiaMapInner.d.ts

@@ -1,4 +1,4 @@
 import 'leaflet/dist/leaflet.css';
 import './UtopiaMap.css';
 import type { UtopiaMapProps } from '#types/UtopiaMapProps';
-export declare function UtopiaMapInner({ height, width, center, zoom, children, geo, showFilterControl, showGratitudeControl, showLayerControl, infoText, }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;
+export declare function UtopiaMapInner({ children, geo, showFilterControl, showGratitudeControl, showLayerControl, infoText, }: UtopiaMapProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>;
+type UseClusterRefManagerResult = ReturnType<typeof useClusterRefManager>;
 declare function useClusterRefManager(): {
     clusterRef: any;
     setClusterRef: React.Dispatch<React.SetStateAction<React.MutableRefObject<undefined>>>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { LayerProps } from '#types/LayerProps';
 import type { Tag } from '#types/Tag';
-declare type UseFilterManagerResult = ReturnType<typeof useFilterManager>;
+type UseFilterManagerResult = ReturnType<typeof useFilterManager>;
 declare function useFilterManager(initialTags: Tag[]): {
     filterTags: Tag[];
     searchPhrase: string;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { Item } from '#types/Item';
 import type { LayerProps } from '#types/LayerProps';
-declare type UseItemManagerResult = ReturnType<typeof useItemsManager>;
+type UseItemManagerResult = ReturnType<typeof useItemsManager>;
 declare function useItemsManager(initialItems: Item[]): {
     items: Item[];
     addItem: (item: Item) => void;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { LayerProps } from '#types/LayerProps';
-declare type UseItemManagerResult = ReturnType<typeof useLayerManager>;
+type UseItemManagerResult = ReturnType<typeof useLayerManager>;
 declare function useLayerManager(initialLayers: LayerProps[]): {
     layers: LayerProps[];
     addLayer: (layer: LayerProps) => void;

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

@@ -6,7 +6,7 @@ interface LeafletRef {
     marker: Marker;
     popup: Popup;
 }
-declare type UseLeafletRefsManagerResult = ReturnType<typeof useLeafletRefsManager>;
+type UseLeafletRefsManagerResult = ReturnType<typeof useLeafletRefsManager>;
 declare function useLeafletRefsManager(initialLeafletRefs: {}): {
     leafletRefs: Record<string, LeafletRef>;
     addMarker: (item: Item, marker: Marker) => void;

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

@@ -4,7 +4,7 @@ import type { ItemsApi } from '#types/ItemsApi';
 import type { LayerProps } from '#types/LayerProps';
 import type { Permission } from '#types/Permission';
 import type { PermissionAction } from '#types/PermissionAction';
-declare type UsePermissionManagerResult = ReturnType<typeof usePermissionsManager>;
+type UsePermissionManagerResult = ReturnType<typeof usePermissionsManager>;
 declare function usePermissionsManager(initialPermissions: Permission[]): {
     permissions: Permission[];
     setPermissionApi: (api: ItemsApi<any>) => void;

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

@@ -7,7 +7,7 @@ interface PolygonClickedProps {
     position: LatLng;
     setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps | null>>;
 }
-declare type UseSelectPositionManagerResult = ReturnType<typeof useSelectPositionManager>;
+type UseSelectPositionManagerResult = ReturnType<typeof useSelectPositionManager>;
 declare function useSelectPositionManager(): {
     selectPosition: Item | LayerProps | null;
     setSelectPosition: React.Dispatch<React.SetStateAction<Item | LayerProps | null>>;

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

@@ -2,7 +2,7 @@
 import type { Item } from '#types/Item';
 import type { ItemsApi } from '#types/ItemsApi';
 import type { Tag } from '#types/Tag';
-declare type UseTagManagerResult = ReturnType<typeof useTagsManager>;
+type UseTagManagerResult = ReturnType<typeof useTagsManager>;
 declare function useTagsManager(initialTags: Tag[]): {
     tags: Tag[];
     addTag: (tag: Tag) => void;

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

@@ -1,4 +1,4 @@
 import type { ItemsApi } from '#types/ItemsApi';
 export declare const AttestationForm: ({ api }: {
-    api?: ItemsApi<any> | undefined;
+    api?: ItemsApi<unknown> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,10 @@
-export declare const EmojiPicker: ({ selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape, }: {
-    selectedEmoji: any;
-    selectedColor: any;
-    selectedShape: any;
-    setSelectedEmoji: any;
-    setSelectedColor: any;
-    setSelectedShape: any;
-}) => import("react/jsx-runtime").JSX.Element;
+interface Props {
+    selectedEmoji: string;
+    selectedColor: string;
+    selectedShape: string;
+    setSelectedEmoji: (emoji: string) => void;
+    setSelectedColor: (color: string) => void;
+    setSelectedShape: (shape: string) => void;
+}
+export declare const EmojiPicker: ({ selectedEmoji, selectedColor, selectedShape, setSelectedEmoji, setSelectedColor, setSelectedShape, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Utils/ContainsUUID.d.ts

@@ -0,0 +1 @@
+export declare function containsUUID(str: string): boolean;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import './index.css';
 export { UtopiaMap, Layer, Tags, Permissions, ItemForm, ItemView, PopupTextAreaInput, PopupStartEndInput, PopupTextInput, PopupButton, TextView, StartEndView, PopupCheckboxInput, } from './Components/Map';
 export { AppShell, Content, SideBar, Sitemap } from './Components/AppShell';
-export { AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage, } from './Components/Auth';
+export { AuthProvider, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage, } from './Components/Auth';
 export { UserSettings, ProfileView, ProfileForm } from './Components/Profile';
 export { Quests, Modal } from './Components/Gaming';
 export { TitleCard, CardPage, MapOverlayPage, OverlayItemsIndexPage, MoonCalendar, SelectUser, AttestationForm, MarketView, } from './Components/Templates';