Merge branch 'main' into improve-get-all-trees

apps/frontpage/app/docs-all/sitemap.ts

@@ -1,5 +1,5 @@
 import { MetadataRoute } from 'next';
-import { generateDocsTree } from '../../lib/get-tree';
+import { getDocsTreeFromPath } from '../../lib/get-docs-tree-from-path';
 import { docsVersions } from '@repo/utils';
 import {
   FlatTreeNode,
@@ -12,7 +12,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
   const listofTrees = docsVersions.map((version) => {
     return {
       version: version,
-      tree: generateDocsTree(`content/docs/${version.id}`),
+      tree: getDocsTreeFromPath(`content/docs/${version.id}`),
     };
   });
 

apps/frontpage/app/docs/[[...slug]]/page.tsx

@@ -1,12 +1,12 @@
 import { notFound, redirect } from 'next/navigation';
 import Link from 'next/link';
 import type { TreeProps } from '@repo/utils';
-import { GLOBAL_SEARCH_META_KEYS, GLOBAL_SEARCH_IMPORTANCE } from '@repo/ui';
+import { globalSearchMetaKeys, globalSearchImportance } from '@repo/ui';
 import { latestVersion, cn } from '@repo/utils';
 import { getVersion } from '../../../lib/get-version';
 import { getPageData } from '../../../lib/get-page';
 import { Renderers } from '../../../components/docs/renderers';
-import { generateDocsTree } from '../../../lib/get-tree';
+import { getDocsTreeFromPath } from '../../../lib/get-docs-tree-from-path';
 import { DocsFooter } from '../../../components/docs/footer/footer';
 import { Metadata } from 'next';
 import { TableOfContent } from '../../../components/docs/table-of-content';
@@ -27,8 +27,8 @@ export async function generateMetadata({
     description:
       "Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.",
     other: {
-      [GLOBAL_SEARCH_META_KEYS.VERSION]: activeVersion.id,
-      [GLOBAL_SEARCH_META_KEYS.IMPORTANCE]: GLOBAL_SEARCH_IMPORTANCE.DOCS,
+      [globalSearchMetaKeys.version]: activeVersion.id,
+      [globalSearchMetaKeys.importance]: globalSearchImportance.docs,
     },
   };
 }
@@ -37,7 +37,7 @@ const latestVersionId = latestVersion.id;
 
 export const generateStaticParams = () => {
   const result: { slug: string[] }[] = [];
-  const tree = generateDocsTree();
+  const tree = getDocsTreeFromPath();
 
   const getSlugs = (data: TreeProps[]) => {
     data.forEach((item) => {
@@ -86,10 +86,10 @@ export default async function Page({ params: { slug } }: PageProps) {
 
   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]">
           {!isLatest && (
-            <div className="flex flex-col items-start gap-4 p-4 mb-8 text-sm text-red-900 bg-red-200 rounded-md md:flex-row md:items-center md:justify-between md:gap-6 md:py-3 md:pl-5 md:pr-3">
+            <div className="mb-8 flex flex-col items-start gap-4 rounded-md bg-red-200 p-4 text-sm text-red-900 md:flex-row md:items-center md:justify-between md:gap-6 md:py-3 md:pl-5 md:pr-3">
               You are viewing documentation for a previous version of Storybook
               <Link
                 href="/docs"
@@ -100,7 +100,7 @@ export default async function Page({ params: { slug } }: PageProps) {
             </div>
           )}
           <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'}

apps/frontpage/app/docs/layout.tsx

@@ -2,9 +2,8 @@ import { Header, Footer, Container } from '@repo/ui';
 import Image from 'next/image';
 import { fetchGithubCount } from '@repo/utils';
 import { Sidebar } from '../../components/docs/sidebar/sidebar';
-import { TableOfContent } from '../../components/docs/table-of-content';
 import { NavDocs } from '../../components/docs/sidebar/docs-nav';
-import { generateDocsTree } from '../../lib/get-tree';
+import { getDocsTreeFromPath } from '../../lib/get-docs-tree-from-path';
 import { DocsProvider } from './provider';
 import { Submenu } from '../../components/docs/submenu';
 import { DocsMainNav } from '../../components/docs/sidebar/docs-main-nav';
@@ -17,13 +16,6 @@ export default async function Layout({ children }: { children: ReactNode }) {
   const { number: githubCount } = await fetchGithubCount();
   const listofTrees = getAllTrees();
 
-  // const listofTrees = docsVersions.map((version) => {
-  //   return {
-  //     version: version.id,
-  //     tree: getDocsTreeFromPath(`content/docs/${version.id}`),
-  //   };
-  // });
-
   return (
     <DocsProvider>
       <Header

apps/frontpage/app/docs/sitemap.ts

@@ -1,5 +1,5 @@
 import { MetadataRoute } from 'next';
-import { generateDocsTree } from '../../lib/get-tree';
+import { getDocsTreeFromPath } from '../../lib/get-docs-tree-from-path';
 import { docsVersions } from '@repo/utils';
 import { getUrl } from '../../lib/get-url';
 import { getFlatTreeSitemap } from '../../lib/get-flat-tree-sitemap';
@@ -8,7 +8,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
   const latestVersion = docsVersions[0];
 
   // Generate docs tree for the latest version only
-  const tree = generateDocsTree(`content/docs/${latestVersion.id}`);
+  const tree = getDocsTreeFromPath(`content/docs/${latestVersion.id}`);
 
   // We flatten the tree
   const flatTree = getFlatTreeSitemap(tree);

apps/frontpage/app/layout.tsx

@@ -1,9 +1,9 @@
 import type { Metadata } from 'next';
 import { Nunito_Sans as nunitoSans } from 'next/font/google';
 import {
-  GLOBAL_SEARCH_META_KEYS,
-  GLOBAL_SEARCH_AGNOSTIC,
-  GLOBAL_SEARCH_IMPORTANCE,
+  globalSearchMetaKeys,
+  globalSearchAgnostic,
+  globalSearchImportance,
 } from '@repo/ui';
 import { cn } from '@repo/utils';
 import { Providers } from './providers';
@@ -32,8 +32,8 @@ export const metadata: Metadata = {
   },
   other: {
     // Set the docsearch index facets defaults
-    [GLOBAL_SEARCH_META_KEYS.VERSION]: GLOBAL_SEARCH_AGNOSTIC,
-    [GLOBAL_SEARCH_META_KEYS.IMPORTANCE]: GLOBAL_SEARCH_IMPORTANCE.AGNOSTIC,
+    [globalSearchMetaKeys.version]: globalSearchAgnostic,
+    [globalSearchMetaKeys.importance]: globalSearchImportance.agnostic,
   },
   verification: {
     google: 'HCBwa2qa52ztaOfGjt3FQGzTUCM3kT8IOjTSY6diI88',

apps/frontpage/components/docs/footer/actions.ts

@@ -8,7 +8,7 @@ import { z } from 'zod';
 import type { TreeProps } from '@repo/utils';
 import { docsVersions } from '@repo/utils';
 import { buildPathWithVersion } from '../../../lib/build-path-with-version';
-import { generateDocsTree } from '../../../lib/get-tree';
+import { getDocsTreeFromPath } from '../../../lib/get-docs-tree-from-path';
 
 const siteUrl = process.env.VERCEL_ENV === 'production';
 
@@ -37,7 +37,7 @@ function addSlugs(tree: TreeProps[]) {
 }
 
 versions.forEach((v) => {
-  const tree = generateDocsTree(`content/docs/${v}`);
+  const tree = getDocsTreeFromPath(`content/docs/${v}`);
   addSlugs(tree);
 });
 

apps/frontpage/lib/get-tree.ts → apps/frontpage/lib/get-docs-tree-from-path.ts

@@ -23,7 +23,10 @@ function shouldParse(fileOrPath: string) {
   return !fileOrPath.endsWith('/versions');
 }
 
-export const generateDocsTree = (pathToFiles?: string, docsRoot?: string) => {
+export const getDocsTreeFromPath = (
+  pathToFiles?: string,
+  docsRoot?: string,
+) => {
   const newPath = pathToFiles || 'content/docs';
   const newDocsRoot = docsRoot || newPath;
 
@@ -36,7 +39,7 @@ export const generateDocsTree = (pathToFiles?: string, docsRoot?: string) => {
       const isDirectory = fs.lstatSync(filePath).isDirectory();
 
       if (isDirectory) {
-        const childItems = generateDocsTree(filePath, newDocsRoot);
+        const childItems = getDocsTreeFromPath(filePath, newDocsRoot);
 
         if (childItems) {
           const indexFile = childItems.find(

apps/frontpage/lib/get-page.tsx

@@ -14,7 +14,7 @@ import {
   Video,
   YouTubeCallout,
 } from '../components/docs/mdx';
-import { generateDocsTree } from './get-tree';
+import { getDocsTreeFromPath } from './get-docs-tree-from-path';
 
 export const getPageData = async (
   path: string[],
@@ -91,7 +91,7 @@ export const getPageData = async (
     ? `${rootPath}/${pathString}`.split('/').slice(0, -1).join('/')
     : `${rootPath}/${pathString}`;
 
-  const parent = generateDocsTree(pathToFiles);
+  const parent = getDocsTreeFromPath(pathToFiles);
 
   const sorted = parent.sort((a, b) =>
     a.tab?.order && b.tab?.order ? a.tab.order - b.tab.order : 0,

packages/ui/src/constants.ts

@@ -1,11 +1,11 @@
-export const GLOBAL_SEARCH_META_KEYS = {
-  VERSION: 'docsearch:version',
-  IMPORTANCE: 'docsearch:importance',
+export const globalSearchMetaKeys = {
+  version: 'docsearch:version',
+  importance: 'docsearch:importance',
 };
 
-export const GLOBAL_SEARCH_AGNOSTIC = 'agnostic';
+export const globalSearchAgnostic = 'agnostic';
 
-export const GLOBAL_SEARCH_IMPORTANCE = {
-  DOCS: 0,
-  AGNOSTIC: 1,
+export const globalSearchImportance = {
+  docs: 0,
+  agnostic: 1,
 };

packages/ui/src/search/index.tsx

@@ -5,7 +5,7 @@ import { DocSearch } from '@docsearch/react';
 import { cn, getVersion } from '@repo/utils';
 import { useSelectedLayoutSegment } from 'next/navigation';
 import type { HeaderProps } from '../header';
-import { GLOBAL_SEARCH_AGNOSTIC } from '../constants';
+import { globalSearchAgnostic } from '../constants';
 
 interface SearchProps extends Pick<HeaderProps, 'algoliaApiKey' | 'variant'> {
   className?: string;
@@ -113,10 +113,7 @@ export const Search: FC<SearchProps> = ({
              * between the containing values
              */
             [`tags:docs`, `tags:recipes`],
-            [
-              `version:${activeVersion.id}`,
-              `version:${GLOBAL_SEARCH_AGNOSTIC}`,
-            ],
+            [`version:${activeVersion.id}`, `version:${globalSearchAgnostic}`],
           ],
         }}
         translations={{