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 = 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: , }; }, [api]);