Merge branch 'main' into shilman/add-preact-to-frameworks

storybookjs · Feb 2, 2025 · f6d2f1e · f6d2f1e
2 parents e71973a + ee165d0
commit f6d2f1e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 26 deletions.
diff --git a/apps/addon-catalog/components/addon/addon-hero.tsx b/apps/addon-catalog/components/addon/addon-hero.tsx
@@ -14,10 +14,11 @@ import { StorybookIcon } from '@repo/ui';
 import { type Addon } from '../../types';
 
 export function AddonHero({ addon }: { addon: Addon }) {
+  const installCommand = `npm install -D ${addon.name ?? ''}`;
   const [state, setState] = useState(false);
 
   const onClick = () => {
-    copy(`npx install ${addon.name ?? ''}`);
+    copy(installCommand);
     setState(true);
     setTimeout(() => {
       setState(false);
@@ -49,7 +50,7 @@ export function AddonHero({ addon }: { addon: Addon }) {
               onClick={onClick}
               type="button"
             >
-              npm install {addon.name} <CopyIcon />
+              {installCommand} <CopyIcon />
               <AnimatePresence>
                 {state ? (
                   <motion.div

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="mb-8 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,
   };

diff --git a/packages/ui/src/mdx/components/headings.tsx b/packages/ui/src/mdx/components/headings.tsx
@@ -66,5 +66,5 @@ export const H3: FC<Omit<HeadingProps, 'level'>> = (props) => {
 };
 
 export const H4: FC<Omit<HeadingProps, 'level'>> = (props) => {
-  return <Heading className="ui-mb-4 ui-text-xl" level={4} {...props} />;
+  return <Heading className="ui-mb-4 ui-text-lg" level={4} {...props} />;
 };
diff --git a/packages/ui/src/mdx/themes/firefox-theme-vscode.ts b/packages/ui/src/mdx/themes/firefox-theme-vscode.ts
@@ -523,7 +523,7 @@ export const firefoxThemeLight = {
     {
       scope: "markup.inserted",
       settings: {
-        foreground: "#86DE74",
+        foreground: "#2f8800",
       },
     },
     {