From 5feca446dff9e1545b5ce52d061a68455cdb4490 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Fri, 27 Oct 2023 21:43:28 +0200
Subject: [PATCH] fix stories

---
 frontend/src/lib/components/Map/Map.stories.tsx |  7 +------
 frontend/src/lib/components/Map/Map.tsx         | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/Map/Map.stories.tsx b/frontend/src/lib/components/Map/Map.stories.tsx
index 09576ec0ed50c..437161ad1dcdd 100644
--- a/frontend/src/lib/components/Map/Map.stories.tsx
+++ b/frontend/src/lib/components/Map/Map.stories.tsx
@@ -15,12 +15,7 @@ const coordinates: [number, number] = [0.119167, 52.205276]
 export const Unavailable: Story = {}
 
 export const Basic: Story = {
-    render: (args) => (
-        <MapComponent
-            mapLibreStyleUrl="" // TODO: set this value for the publish storybook and visual regression tests
-            {...args}
-        />
-    ),
+    render: (args) => <MapComponent {...args} />,
     args: {
         center: coordinates,
         markers: [new Marker({ color: 'var(--primary)' }).setLngLat(coordinates)],
diff --git a/frontend/src/lib/components/Map/Map.tsx b/frontend/src/lib/components/Map/Map.tsx
index 8a88c707e03ca..a50f7425a4036 100644
--- a/frontend/src/lib/components/Map/Map.tsx
+++ b/frontend/src/lib/components/Map/Map.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { Map as RawMap, Marker, StyleSpecification } from 'maplibre-gl'
+import { Map as RawMap, Marker } from 'maplibre-gl'
 import layers from 'protomaps-themes-base'
 import useResizeObserver from 'use-resize-observer'
 import { useValues } from 'kea'
@@ -22,10 +22,7 @@ export interface MapProps {
     className?: string
 }
 
-export function Map({ center, markers, className }: MapProps): JSX.Element {
-    const mapContainer = useRef<HTMLDivElement>(null)
-    const map = useRef<RawMap | null>(null)
-    const { isDarkModeOn } = useValues(themeLogic)
+export function Map({ className, ...rest }: MapProps): JSX.Element {
     const { isCloudOrDev } = useValues(preflightLogic)
 
     if (!isCloudOrDev) {
@@ -37,6 +34,15 @@ export function Map({ center, markers, className }: MapProps): JSX.Element {
         )
     }
 
+    return <MapComponent className={className} {...rest} />
+}
+
+export function MapComponent({ center, markers, className }: MapProps): JSX.Element {
+    const mapContainer = useRef<HTMLDivElement>(null)
+    const map = useRef<RawMap | null>(null)
+
+    const { isDarkModeOn } = useValues(themeLogic)
+
     useEffect(() => {
         map.current = new RawMap({
             container: mapContainer.current as HTMLElement,