added storybook

package.json

@@ -7,7 +7,9 @@
   "main": "dist/index.js",
   "scripts": {
     "build": "rollup -c",
-    "start": "rollup -c -w"
+    "start": "rollup -c -w",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "files": [
     "dist"
@@ -16,12 +18,22 @@
   "author": "Anton Tranelis",
   "license": "MIT",
   "devDependencies": {
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
     "@types/leaflet": "^1.7.11",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-leaflet": "^2.8.2",
     "autoprefixer": "^10.4.7",
     "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
     "babel-runtime": "^6.26.0",
     "daisyui": "^2.19.0",
     "postcss": "^8.4.14",

src/Components/Map/Layer.tsx

@@ -7,7 +7,7 @@ import { useItems } from './useItems'
 
 
 export interface LayerProps {
-    data: Item[],
+    data?: Item[],
     children?: React.ReactNode
     name: string,
     menuIcon: string,

src/Components/Map/UtopiaMap.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { UtopiaMap } from "./UtopiaMap";
+import { Layer } from "./Layer";
+
+export default {
+    title: "Utopia Map",
+    component: UtopiaMap,
+} as ComponentMeta<typeof UtopiaMap>;
+
+
+const Template: ComponentStory<typeof UtopiaMap> = (args) => (
+    <UtopiaMap height="600px">
+        <Layer
+            name='places'
+            menuIcon='LocationMarkerIcon'
+            menuText='add new place'
+            menuColor='#2E7D32'
+            markerIcon='circle-solid'
+            markerShape='circle'
+            markerDefaultColor='#777'
+        />
+        <Layer
+            name='events'
+            menuIcon='CalendarIcon'
+            menuText='add new event'
+            menuColor='#f9a825'
+            markerIcon='calendar-days-solid'
+            markerShape='square'
+            markerDefaultColor='#777'
+        />
+    </UtopiaMap>
+);
+
+
+export const Custom = Template.bind({});
+Custom.args = {
+
+};
+
+export const BadSalzschlirf = Template.bind({});
+BadSalzschlirf.args = {
+    center : [9.5061,50.6238],
+    zoom: 15
+};

src/Components/Map/UtopiaMap.tsx

@@ -2,7 +2,7 @@ import { TileLayer, MapContainer, useMapEvents } from "react-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as React from "react";
 import { Item, Tag, API, Geometry } from "../../types"
-import "../../index.css"
+import "./UtopiaMap.css"
 import { LatLng } from "leaflet";
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import AddButton from "./AddButton";