docs: migrate UI docs (#13245)

* docs: create a new UI docs project (#13233)

* docs: create a new UI docs project

* fix installation errors

* docs: migrate UI docs content to new project (#13241)

* Fix content

* added examples for some components

* finish adding examples

* lint fix

* fix build errors

* delete empty files

* path fixes + refactor

* fix build error

www/packages/build-scripts/src/retrieve-mdx-pages.ts

@@ -4,13 +4,9 @@ import { getFileSlugSync } from "docs-utils"
 
 type Options = {
   basePath: string
-  testFileName?: boolean
 }
 
-export function retrieveMdxPages({
-  basePath,
-  testFileName = true,
-}: Options): string[] {
+export function retrieveMdxPages({ basePath }: Options): string[] {
   function retrieveMdxFilesInPath(dir: string): string[] {
     const urls = []
     const files = readdirSync(dir, {
@@ -24,24 +20,15 @@ export function retrieveMdxPages({
           urls.push(...retrieveMdxFilesInPath(filePath))
         }
         continue
-      } else if (
-        (testFileName && file.name !== "page.mdx") ||
-        (!testFileName && !file.name.endsWith(".mdx"))
-      ) {
+      } else if (file.name !== "page.mdx") {
         continue
       }
 
       const slug = getFileSlugSync(filePath)
 
-      let url = slug || filePath.replace(basePath, "")
-
-      if (testFileName || file.name === "index.mdx") {
-        url = url.replace(file.name, "")
-      } else {
-        url = url.replace(".mdx", "")
-      }
-
-      url = url.replace(/\/$/, "")
+      const url = (slug || filePath.replace(basePath, ""))
+        .replace(file.name, "")
+        .replace(/\/$/, "")
 
       urls.push(url)
     }

www/packages/docs-ui/src/components/ContentMenu/index.tsx

@@ -17,8 +17,8 @@ export const ContentMenu = () => {
         "hidden lg:flex w-full max-w-sidebar-lg",
         "flex-col gap-docs_2 pb-docs_1.5 pr-docs_1",
         "fixed top-[57px] right-docs_0.25 z-10",
-        showCollapsedNavbar && "h-[calc(100%-112px)] pt-[84px]",
-        !showCollapsedNavbar && "h-[calc(100%-56px)] pt-[28px]"
+        showCollapsedNavbar && "max-h-[calc(100%-112px)] pt-[84px]",
+        !showCollapsedNavbar && "max-h-[calc(100%-56px)] pt-[28px]"
       )}
     >
       <ContentMenuVersion />

www/packages/remark-rehype-plugins/src/broken-link-checker.ts

@@ -65,7 +65,6 @@ function checkLocalLinkExists({
   fileToCheck = fileToCheck.replace(/^\//, "")
   // get absolute path of the URL
   const linkedFilePath = path.resolve(basePath, fileToCheck).replace(/#.*$/, "")
-  // console.log(link, currentPageFilePath, basePath, fileToCheck, linkedFilePath)
   // check if the file exists
   if (existsSync(linkedFilePath)) {
     return
@@ -130,13 +129,10 @@ function mdxPageExists(pagePath: string): boolean {
     return false
   }
 
-  if (existsSync(path.join(pagePath, "page.mdx"))) {
-    return true
-  }
-
-  // for projects that use a convention other than mdx
-  // check if an mdx file exists with the same name
-  return readdirSync(pagePath).some((fileName) => fileName.endsWith(".mdx"))
+  return (
+    existsSync(path.join(pagePath, "page.mdx")) ||
+    existsSync(path.join(pagePath, "page.tsx"))
+  )
 }
 
 function componentChecker({

www/packages/remark-rehype-plugins/src/ui-rehype-plugin.ts

@@ -38,7 +38,7 @@ export function uiRehypePlugin({ exampleRegistry }: Options) {
               tagName: "span",
               properties: {
                 __src__: src,
-                code: source,
+                codeLinesJSON: JSON.stringify(source.split("\n")),
               },
             })
           )
@@ -53,7 +53,7 @@ export function uiRehypePlugin({ exampleRegistry }: Options) {
           return null
         }
 
-        const mainSpecsDir = path.join(process.cwd(), "src/specs")
+        const mainSpecsDir = path.join(process.cwd(), "specs", "components")
         const componentSpecsDir = path.join(mainSpecsDir, mainComponent)
         const specs: Documentation[] = []
 

www/packages/tags/src/utils/generate-tags.ts

@@ -45,7 +45,7 @@ const config: ConfigItem[] = [
     path: path.resolve("..", "..", "apps", "ui"),
     contentPaths: [
       {
-        path: path.join("src", "content", "docs"),
+        path: "app",
         omitFromPath: true,
       },
     ],