Merge pull request #259 from storybookjs/docs-page-tabs

Re-add docs page tabs
storybookjs · Jan 29, 2025 · 7542651 · 7542651
2 parents d757190 + 401e347
commit 7542651
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 22 deletions.
diff --git a/apps/frontpage/components/docs/content.tsx b/apps/frontpage/components/docs/content.tsx
@@ -1,5 +1,6 @@
-import { cn } from '@repo/utils';
 import { type FC } from 'react';
+import Link from 'next/link';
+import { cn } from '@repo/utils';
 import { type PageDataProps } from '../../lib/get-page';
 import { Renderers } from './renderers';
 import { DocsFooter } from './footer/footer';
@@ -8,36 +9,56 @@ import { TableOfContent } from './table-of-content';
 export const Content: FC<{ page: PageDataProps }> = ({ page }) => {
   return (
     <>
-      <div className="flex-1 w-full min-w-0 py-12">
+      <div className="w-full min-w-0 flex-1 py-12">
         <main className="mx-auto max-w-[720px]">
           <h1
-            className="relative mt-0 mb-6 text-4xl font-bold text-black transition-colors duration-200 group-hover:text-blue-500 dark:text-white"
+            className="relative mb-6 mt-0 text-4xl font-bold text-black transition-colors duration-200 group-hover:text-blue-500 dark:text-white"
             data-docs-heading
           >
             {page.title ?? 'Title is missing'}
           </h1>
           {!page.hideRendererSelector && <Renderers />}
-          {/* TODO: Bring back tabs */}
-          {/* {page.tabs && page.tabs.length > 0 ? (
-        <div className="flex items-center gap-8 border-b border-zinc-200">
-          {page.tabs.map((tab) => {
-            const isActive = tab.slug === `/docs/${slug?.join('/')}`;
-
-            return (
-              <Link
-                className={cn(
+          {page.tabs && page.tabs.length > 0 ? (
+            <div className="flex items-center gap-8 border-b border-zinc-200">
+              {page.tabs.map((tab) => {
+                const tabTitle = tab.tab?.title ?? tab.title;
+                const isActive = tab.pathSegment === page.path;
+                const className = cn(
                   '-mb-px border-b px-2 pb-2 text-sm capitalize transition-colors hover:text-blue-500',
                   isActive && 'border-b border-blue-500 text-blue-500',
-                )}
-                href={tab.slug}
-                key={tab.name}
-              >
-                {tab.tab?.title || tab.title}
-              </Link>
-            );
-          })}
-        </div>
-      ) : null} */}
+                );
+
+                if (isActive) {
+                  return (
+                    <span className={className} key={tab.name}>
+                      {tabTitle}
+                    </span>
+                  );
+                }
+
+                const relevantPathSegments = (
+                  tab.name === 'index.mdx'
+                    ? tab.pathSegment.split('/').slice(-2, -1)
+                    : tab.pathSegment.split('/').slice(-2)
+                )
+                  .join('/')
+                  .replace('.mdx', '');
+                const href = page.isIndexPage
+                  ? `./${relevantPathSegments}`
+                  : `../${relevantPathSegments}`;
+
+                return (
+                  <Link
+                    className={className}
+                    href={href}
+                    key={tab.name}
+                  >
+                    {tabTitle}
+                  </Link>
+                );
+              })}
+            </div>
+          ) : null}
           <div
             className={cn(
               '[&>details]:my-6',

diff --git a/apps/frontpage/lib/get-docs-tree-from-path.ts b/apps/frontpage/lib/get-docs-tree-from-path.ts
@@ -84,6 +84,10 @@ export const getDocsTreeFromPath = (
     a.sidebar?.order && b.sidebar?.order
       ? a.sidebar.order - b.sidebar.order
       : 0,
+  ).sort((a, b) =>
+    a.tab?.order && b.tab?.order
+      ? a.tab.order - b.tab.order
+      : 0,
   );
   // TODO: Remove the index page from the tree, probably from pathSegment instead of slug
   // .filter((item) => {

diff --git a/apps/frontpage/lib/get-page.tsx b/apps/frontpage/lib/get-page.tsx
@@ -23,6 +23,7 @@ export interface PageDataProps {
   isIndexPage: boolean;
   tabs: RawTreeProps[];
   content: ReactElement;
+  path: string;
 }
 
 export const getPageData = async (
@@ -109,6 +110,7 @@ export const getPageData = async (
   return {
     ...frontmatter,
     isIndexPage: isIndexMDX || isIndexMD,
+    path: newPath,
     tabs: index?.isTab ? parent : [],
     content,
   };