fix stories

PostHog · Oct 27, 2023 · 5feca44 · 5feca44
1 parent 1f76b5e
commit 5feca44
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git 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
@@ -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,