From c0e78b1b2701bcc613af860d619f7d1df5ea7d48 Mon Sep 17 00:00:00 2001
From: Shaun Lloyd <shaun@chromatic.com>
Date: Fri, 12 Jan 2024 11:34:19 -0500
Subject: [PATCH] WIP: saving progress on renderer

---
 .../interactions/src/components/EmptyState.tsx    | 12 +++++++++++-
 .../src/components/InteractionsPanel.tsx          |  2 +-
 code/ui/manager/src/container/Menu.tsx            | 15 ++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/code/addons/interactions/src/components/EmptyState.tsx b/code/addons/interactions/src/components/EmptyState.tsx
index 4713cbb98dcd..b74358cfc170 100644
--- a/code/addons/interactions/src/components/EmptyState.tsx
+++ b/code/addons/interactions/src/components/EmptyState.tsx
@@ -49,8 +49,18 @@ const Divider = styled.div(({ theme }) => ({
   backgroundColor: theme.appBorderColor,
 }));
 
+const sanitizeRendererForDocsUrl = (renderer: string) => {
+  const normalizedRenderer = renderer.toLowerCase();
+
+  if (normalizedRenderer.includes('vue')) {
+    return 'vue';
+  }
+
+  return normalizedRenderer;
+};
+
 const buildDocsUrl = (base: string, path: string, renderer: string) =>
-  `${base}${path}?renderer=${renderer}`;
+  `${base}${path}?renderer=${sanitizeRendererForDocsUrl(renderer)}`;
 
 interface EmptyProps {
   renderer: string;
diff --git a/code/addons/interactions/src/components/InteractionsPanel.tsx b/code/addons/interactions/src/components/InteractionsPanel.tsx
index e4e7483240ae..aecfb6ac0c3e 100644
--- a/code/addons/interactions/src/components/InteractionsPanel.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.tsx
@@ -99,7 +99,7 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
   }) {
     const api = useStorybookApi();
 
-    const renderer = 'react';
+    const renderer = globalThis.STORYBOOK_ENV;
     const docsUrlBase = api.getVersionDocsBaseUrl();
 
     return (
diff --git a/code/ui/manager/src/container/Menu.tsx b/code/ui/manager/src/container/Menu.tsx
index 3ebc802b902b..ea95618ce520 100644
--- a/code/ui/manager/src/container/Menu.tsx
+++ b/code/ui/manager/src/container/Menu.tsx
@@ -48,6 +48,16 @@ export const Shortcut: FC<{ keys: string[] }> = ({ keys }) => (
   </>
 );
 
+const sanitizeRendererForDocsUrl = (renderer: string) => {
+  const normalizedRenderer = renderer.toLowerCase();
+
+  if (normalizedRenderer.includes('vue')) {
+    return 'vue';
+  }
+
+  return normalizedRenderer;
+};
+
 export const useMenu = (
   state: State,
   api: API,
@@ -71,10 +81,13 @@ export const useMenu = (
   );
 
   const documentation = useMemo(() => {
+    const baseURL = api.getVersionDocsBaseUrl();
+    const renderer = sanitizeRendererForDocsUrl(globalThis.STORYBOOK_ENV);
+
     return {
       id: 'documentation',
       title: 'Documentation',
-      href: api.getVersionDocsBaseUrl(),
+      href: `${baseURL}?renderer=${renderer}`,
       icon: <ShareAltIcon />,
     };
   }, [api]);