fix!: use globals instead of parameters

.storybook/preview.js

@@ -1,9 +1,9 @@
 const preview = {
-  parameters: {
+  initialGlobals: {
     marker: {
       project: '60f162459a86003bf9d741b3',
     }
-  }
+  },
 };
 
 export default preview;

README.md

@@ -22,15 +22,15 @@ export default {
 }
 ```
 
-Then create a file called `preview.js` in the same folder and add your [Marker project ID](https://marker.io/blog/integrate-web-app-browser-sdk) as a [parameter](https://storybook.js.org/docs/react/writing-stories/parameters).
+Then create a file called `preview.js` in the same folder and add your [Marker project ID](https://marker.io/blog/integrate-web-app-browser-sdk) in the [initalGlobals](https://storybook.js.org/docs/essentials/toolbars-and-globals).
 
 ```js
 export default {
-  parameters: {
+  initialGlobals: {
     marker: {
       project: 'abcd1234567890', // Your unique project ID
-    }
-  }
+    },
+  },
 }
 ```
 
@@ -39,11 +39,13 @@ Only `project` is required, the [rest of the marker widget params](https://githu
 Additionally, the `mode` option of [the browser SDK `capture` method](https://github.com/marker-io/browser-sdk?tab=readme-ov-file#widgetcapturemode) can be added to this config:
 
 ```js
-export const parameters = {
-  marker: {
-    project: 'abcd1234567890', // <- Your unique project ID
-    mode: 'fullscreen', // fullscreen | advanced
-  }
+export default {
+  initialGlobals: {
+    marker: {
+      project: 'abcd1234567890', // <- Your unique project ID
+      mode: 'fullscreen', // fullscreen | advanced
+    },
+  },
 }
 ```
 

src/FeedbackButton.jsx

@@ -1,6 +1,7 @@
+import markerSDK from '@marker.io/browser';
 import { IconButton } from '@storybook/components';
 import { CommentIcon } from '@storybook/icons';
-import { useChannel, useParameter } from '@storybook/manager-api';
+import { useChannel, useGlobals } from '@storybook/manager-api';
 import { styled } from '@storybook/theming';
 import React, { useCallback, useEffect, useState } from 'react';
 
@@ -28,10 +29,17 @@ const IconButtonLabel = styled.div(({ theme }) => ({
 
 export default function FeedbackButton() {
   const [markerLoaded, setMarkerLoaded] = useState(false);
-  const { destination, project, mode, ...config } = useParameter('marker', {});
+  const [globals] = useGlobals();
+  const { project, mode, ...config } = globals.marker ?? {};
 
   const emit = useChannel({
+    // The loaded event will fire when the marker decorator loads
     [EVENTS.LOADED]: () => {
+      if (window.Marker) {
+        // Unload the manager version of marker
+        window.Marker.unload();
+      }
+
       setMarkerLoaded(true);
     },
     [EVENTS.CAPTURE]: () => {
@@ -45,28 +53,21 @@ export default function FeedbackButton() {
     emit(EVENTS.CAPTURE);
   }, [emit]);
 
-  const loadMarkerOnManager = useCallback(() => {
-    if ((!destination && !project) || markerLoaded || window.Marker) {
-      return;
-    }
-
-    markerSDK
-      .loadWidget({
-        project: project ?? destination,
-        ...config,
-      })
-      .then(() => {
-        hideDefaultMarkerButton();
-        emit(EVENTS.LOADED);
-      });
-  }, [markerLoaded]);
-
   // If the decorator has not loaded within 3 seconds fallback to loading it on the manager.
   // Screenshots may appear unstyled, but it's better than no feedback button displaying.
   // This might happen on mdx docs stories where no decorators aren't called.
   useEffect(() => {
-    setTimeout(loadMarkerOnManager, 3000);
-  }, []);
+    clearTimeout(window.markerTimer);
+
+    if (project && !markerLoaded && !window.Marker) {
+      window.markerTimer = setTimeout(() => {
+        markerSDK.loadWidget({ project, ...config }).then(() => {
+          hideDefaultMarkerButton();
+          setMarkerLoaded(true);
+        });
+      }, 3000);
+    }
+  }, [project, markerLoaded]);
 
   return markerLoaded ? (
     <IconButtonWithLabel key={TOOL_ID} onClick={handleSendFeedback}>

src/withMarker.js

@@ -1,12 +1,14 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import markerSDK from '@marker.io/browser';
-import { useChannel, useParameter } from '@storybook/preview-api';
+import { useChannel, useGlobals } from '@storybook/preview-api';
 
 import { EVENTS } from './constants';
 import { hideDefaultMarkerButton } from './hideDefaultMarkerButton';
 
 export const withMarker = (storyFn) => {
-  const { destination, project, mode, ...config } = useParameter('marker', {});
+  const [globals] = useGlobals();
+  const { project, mode, ...config } = globals.marker ?? {};
+
   const emit = useChannel({
     [EVENTS.CAPTURE]: () => {
       window.Marker?.capture(mode)?.then(() => {
@@ -15,19 +17,14 @@ export const withMarker = (storyFn) => {
     },
   });
 
-  if ((!destination && !project) || window.Marker) {
+  if (!project || window.Marker) {
     return storyFn();
   }
 
-  markerSDK
-    .loadWidget({
-      project: project ?? destination,
-      ...config,
-    })
-    .then(() => {
-      hideDefaultMarkerButton();
-      emit(EVENTS.LOADED);
-    });
+  markerSDK.loadWidget({ project, ...config }).then(() => {
+    hideDefaultMarkerButton();
+    emit(EVENTS.LOADED);
+  });
 
   return storyFn();
 };