Merge pull request #21 from BelkacemYerfa/master

feat : add the new example for breadcrumb , feat : add mobile menu for navigation

content/docs/tree-view.mdx

@@ -460,50 +460,6 @@ const elements :TreeViewElement[]  = [
         },
       ],
     },
-    {
-      id: "9",
-      name: "registry",
-      children: [
-        {
-          id: "10",
-          name: "default",
-          children: [
-            {
-              id: "11",
-              name: "extension",
-              children: [
-                {
-                  id: "12",
-                  name: "tree-view.tsx",
-                },
-                {
-                  id: "13",
-                  name: "tree-view-api.tsx",
-                },
-              ],
-            },
-            {
-              id: "14",
-              name: "dashboard-tree.tsx",
-            },
-          ],
-        },
-        {
-          id: "15",
-          name: "pages",
-          children: [
-            {
-              id: "16",
-              name: "page.tsx",
-            },
-            {
-              id: "17",
-              name: "page-guide.tsx",
-            },
-          ],
-        },
-      ],
-    },
     {
       id: "18",
       name: "env.ts",
@@ -520,7 +476,7 @@ const elements :TreeViewElement[]  = [
 First we create the TOC component.
 
 ```tsx showLineNumbers title="components/Table_of_content/tree.tsx"
-import { Tree , TreeViewElement } from "@/components/extension/tree-view-api";
+import { Tree , TreeViewElement , CollapseButton } from "@/components/extension/tree-view-api";
 import { TreeItem } from "./tree-item.tsx"
 
 type TOCProps = {
@@ -536,11 +492,14 @@ return (
           <TreeItem key={element.id}  elements={[element]} />
         )
       }
+      <CollapseButton elements={toc} expandAll={true} />
     </Tree>
   )
 }
 ```
 
+Here we can see that we created a `TOC` component that will be responsible for rendering all the tree , the CollapseButton is used for the expandAll functionality.
+
 <Step> TreeItem component </Step>
 
 Then the TreeItem element.

package.json

@@ -56,7 +56,6 @@
     "react-live": "^4.1.6",
     "react-otp-input": "^3.1.1",
     "react-resizable-panels": "^2.0.12",
-    "react-runner": "^1.0.3",
     "react-wrap-balancer": "^1.1.0",
     "rehype-pretty-code": "^0.13.0",
     "rehype-slug": "^6.0.0",

src/app/page.tsx

@@ -6,8 +6,7 @@ import { cn } from "@/lib/utils";
 import Link from "next/link";
 import Balancer from "react-wrap-balancer";
 
-//provide the set of api to the component that allow to build the ui examples
-export default function Home() {
+export default async function Home() {
   return (
     <main className="max-w-2xl mx-auto flex-1 flex flex-col">
       <section className="flex-1 flex flex-col items-center justify-center gap-4 ">

src/components/banner.tsx

@@ -1,19 +1,20 @@
 import Link from "next/link";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { siteConfig } from "@/config/site-config";
 
 export const Banner = () => {
   return (
-    <div className="bg-gradient-to-r from-[#9800ff] via-[#f62929] to-[#ffa908] z-20 text-accent-background py-1 md:py-2 text-center text-sm">
-      🥳 <span>New docs for shadcn extesnion are live.</span>
+    <div className="bg-gradient-to-r from-[#9800ff] via-[#f62929] to-[#ffa908] z-20 text-accent-background py-1 md:py-2 text-center text-sm text-white">
+      🥳 <span>New docs for {siteConfig.name} are live.</span>
       <Link
         href="/docs"
         rel="noopener noreferrer"
         className={cn(
           buttonVariants({
             variant: "link",
           }),
-          "px-1 text-sm py-0 h-fit"
+          "px-1 text-sm py-0 h-fit text-white"
         )}
       >
         Check them out

src/components/layouts/toc.tsx

@@ -31,15 +31,15 @@ export const DocMainTOC = ({ toc, slug }: TocProps) => {
         <div className="flex flex-col space-y-1">
           <Link
             target="_blank"
-            href={`${siteConfig.links.github.toString()}/issues/new?assignees=&labels=bug&template=bug_report.md&title=Feedback`}
+            href={`${siteConfig.links.github.toString()}/issues/new?title=Feedback`}
             className="text-sm group text-muted-foreground group hover:text-foreground/90 duration-200 transition-colors flex items-center gap-2"
           >
             <span>Questions? Give us feedback</span>
             <MoveRight className="size-4 group-hover:translate-x-1 duration-200 transition-transform" />
           </Link>
           <Link
             target="_blank"
-            href={`${siteConfig.links.github.toString()}/tree/playground/content${slug}.mdx`}
+            href={`${siteConfig.links.github.toString()}/tree/master/content${slug}.mdx`}
             className="text-sm text-muted-foreground hover:text-foreground/90 duration-200 transition-colors "
           >
             Edit this page

src/components/playground/playground-preview.tsx

@@ -10,11 +10,7 @@ type LivePlaygroundPreviewProps = {
 export const LivePlaygroundPreview = memo(
   ({ code, dependencies, example }: LivePlaygroundPreviewProps) => {
     return (
-      <LiveProvider
-        noInline={true}
-        code={code ?? example}
-        scope={{ ...dependencies }}
-      >
+      <LiveProvider code={code ?? example} scope={{ ...dependencies }}>
         <div className="text-destructive text-center font-bold">
           <LiveError />
         </div>

src/components/playground/playground.tsx

@@ -27,6 +27,12 @@ import { PlaygroundSearchSelector } from "@/components/drop-downs/search-selecto
 import { useSearchParams } from "next/navigation";
 import { Skeleton } from "@/components/ui/skeleton";
 import Editor, { Monaco, useMonaco } from "@monaco-editor/react";
+import {
+  Tree,
+  File,
+  Folder,
+  CollapseButton,
+} from "@/registry/default/extension/tree-view-api";
 
 type PlaygroundProps = {
   defaultCode?: string;
@@ -654,7 +660,7 @@ const Playground = memo(({ defaultCode, dependencies }: PlaygroundProps) => {
             ) : (
               <Editor
                 className="h-full outline-0"
-                defaultLanguage="javascript"
+                defaultLanguage="typescript"
                 defaultValue={defaultCode}
                 value={
                   fileContent.find((file) => file.file === chosenFile)?.content
@@ -710,7 +716,12 @@ const Playground = memo(({ defaultCode, dependencies }: PlaygroundProps) => {
             <LivePlaygroundPreview
               code={code.trim()}
               example={dependencies?.example?.trim()}
-              dependencies={dependencies?.importedItems}
+              dependencies={{
+                Tree,
+                Folder,
+                File,
+                CollapseButton,
+              }}
             />
             {/*  <pre>{defaultCode}</pre> */}
           </div>

src/lib/element-parser.ts

@@ -53,7 +53,7 @@ function extractComponentContent(fileContent: string): string {
 }
 
 export const readFieContent = (name: string) => {
-  const correctName = name.toLowerCase().split(" ").join("-") + "-example";
+  const correctName = name.toLowerCase().split(" ").join("-") + "-demo";
   const filePath = `src/registry/default/example/${correctName}.tsx`;
   const file = fs.readFileSync(filePath, "utf-8");
   return file;