chore(POI Maps): add a Studio responsive story

packages/visualizations-react/stories/Poi/PoiMap.stories.tsx

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { BBox } from 'geojson';
 import { CATEGORY_ITEM_VARIANT, POPUP_DISPLAY } from '@opendatasoft/visualizations';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { Layer, PoiMapOptions } from '@opendatasoft/visualizations';
+import type {
+    Layer,
+    PoiMapOptions,
+    PopupDisplayTypes,
+    PopupLayer,
+} from '@opendatasoft/visualizations';
 
 import { defaultSource, timeout } from '../utils';
 
@@ -268,3 +273,66 @@ const PoiMapCooperativeGesturesArgs = {
     },
 };
 PoiMapCooperativeGestures.args = PoiMapCooperativeGesturesArgs;
+
+/**
+ * STORY: with cooperative gestures
+ */
+
+const StudioResponsiveUsageTemplate = () => {
+    const [props, setProps] = useState({
+        data: {
+            value: {
+                layers,
+                sources,
+            },
+        },
+        options: {
+            ...options,
+            legend,
+        },
+    });
+
+    useEffect(() => {
+        const onResize = () => {
+            const popupDisplay: PopupDisplayTypes =
+                window.innerWidth > 600 ? POPUP_DISPLAY.sidebar : POPUP_DISPLAY.modal;
+            setProps({
+                ...props,
+                data: {
+                    value: {
+                        layers: [
+                            {
+                                ...layer1,
+                                popup: { ...(layer1.popup as PopupLayer), display: popupDisplay },
+                            },
+                            {
+                                ...layer2,
+                                popup: { ...(layer2.popup as PopupLayer), display: popupDisplay },
+                            },
+                        ],
+                        sources,
+                    },
+                },
+            });
+        };
+
+        window.addEventListener('resize', onResize); // Update the width on resize
+
+        return () => window.removeEventListener('resize', onResize);
+    });
+
+    return (
+        <>
+            <h2>
+                Change the size of the preview (between mobile and tablet) to see popup changes its
+                display to modal{' '}
+            </h2>
+            <PoiMap {...props} />
+        </>
+    );
+};
+export const StudioResponsiveUsage: ComponentStory<typeof PoiMap> = StudioResponsiveUsageTemplate;
+
+StudioResponsiveUsage.parameters = {
+    chromatic: { disableSnapshot: true },
+};