Merge pull request #88 from storybookjs/fix-renderers

Fix renderers
storybookjs · Jun 18, 2024 · b1c78af · b1c78af
2 parents 0d43106 + fa90991
commit b1c78af
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 23 deletions.
diff --git a/apps/frontpage/app/docs/[[...slug]]/page.tsx b/apps/frontpage/app/docs/[[...slug]]/page.tsx
@@ -1,7 +1,7 @@
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
 import type { TreeProps } from '@repo/utils';
-import { renderers, latestVersion, cn } from '@repo/utils';
+import { latestVersion, cn } from '@repo/utils';
 import { getVersion } from '../../../lib/get-version';
 import { getPageData } from '../../../lib/get-page';
 import { Renderers } from '../../../components/docs/renderers';
@@ -68,9 +68,7 @@ export default async function Page({ params: { slug } }: PageProps) {
         >
           {page.title || 'Title is missing'}
         </h1>
-        {!page.hideRendererSelector && (
-          <Renderers activeRenderer={renderers[0]?.id || ''} />
-        )}
+        {!page.hideRendererSelector && <Renderers />}
         {page.tabs && page.tabs.length > 0 ? (
           <div className="flex items-center gap-8 border-b border-zinc-200">
             {page.tabs.map((tab) => {

diff --git a/apps/frontpage/components/docs/renderers/index.tsx b/apps/frontpage/components/docs/renderers/index.tsx
@@ -1,29 +1,25 @@
 'use client';
 
+import { FC, useEffect, useState } from 'react';
+import { useMediaQuery } from '../../../hooks/use-media-query';
 import { renderers } from '@repo/utils';
-import { useEffect, useState, type FC } from 'react';
+import { Button } from './button';
+import { useDocs } from '../../../app/docs/provider';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@repo/ui';
-import { useDocs } from '../../../app/docs/provider';
-import { Button } from './button';
-import { useMediaQuery } from '../../../hooks/use-media-query';
-
-interface RenderersProps {
-  activeRenderer: string;
-}
 
-export const Renderers: FC<RenderersProps> = () => {
-  const { activeRenderer, setRenderer } = useDocs();
+export const Renderers: FC = () => {
+  let { activeRenderer, setRenderer } = useDocs();
   const [isMobile] = useMediaQuery('(max-width: 480px)');
   const [firstList, setFirstList] = useState(renderers.slice(0, 3));
   const [lastRenderer, setLastRenderer] = useState(renderers[3]);
-  const [localRenderer, setLocalRenderer] = useState('react');
 
   useEffect(() => {
+    // On mobile we only show the first two renderers
     if (isMobile) {
       setFirstList(renderers.slice(0, 2));
       setLastRenderer(renderers[2]);
@@ -33,21 +29,18 @@ export const Renderers: FC<RenderersProps> = () => {
     }
 
     const isInFirstList = firstList.some(
-      (renderer) => renderer.id === localRenderer,
+      (renderer) => renderer.id === activeRenderer,
     );
+
     const activeRendererObj = renderers.find(
-      (renderer) => renderer.id === localRenderer,
+      (renderer) => renderer.id === activeRenderer,
     );
 
     if (!isInFirstList && activeRendererObj) {
       setLastRenderer(activeRendererObj);
     }
   }, [isMobile, activeRenderer]);
 
-  useEffect(() => {
-    if (activeRenderer) setLocalRenderer(activeRenderer);
-  }, [activeRenderer]);
-
   const restRenderers = renderers.filter((r) => {
     return !firstList.includes(r) && r !== lastRenderer;
   });
@@ -56,7 +49,7 @@ export const Renderers: FC<RenderersProps> = () => {
     <div className="mb-8 flex gap-2">
       {firstList.map((renderer) => (
         <Button
-          active={renderer.id === localRenderer}
+          active={renderer.id === activeRenderer}
           key={renderer.id}
           onClick={() => {
             setRenderer(renderer.id);
@@ -66,7 +59,7 @@ export const Renderers: FC<RenderersProps> = () => {
         </Button>
       ))}
       <Button
-        active={lastRenderer?.id === localRenderer}
+        active={lastRenderer?.id === activeRenderer}
         onClick={() => {
           setRenderer(lastRenderer?.id || '');
         }}