fix : tree view guide

BelkacemYerfa · Mar 28, 2024 · d348a88 · d348a88
1 parent 1c326b4
commit d348a88
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 125 deletions.
diff --git a/content/docs/tree-view.mdx b/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.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/app/page.tsx b/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 ">

diff --git a/src/components/banner.tsx b/src/components/banner.tsx
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
 
 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">
+    <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 shadcn extesnion are live.</span>
       <Link
         href="/docs"
@@ -13,7 +13,7 @@ export const Banner = () => {
           buttonVariants({
             variant: "link",
           }),
-          "px-1 text-sm py-0 h-fit"
+          "px-1 text-sm py-0 h-fit text-white"
         )}
       >
         Check them out

diff --git a/src/components/playground/playground-preview.tsx b/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>

diff --git a/src/components/playground/playground.tsx b/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>

diff --git a/src/lib/element-parser.ts b/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;

diff --git a/src/registry/default/example/tree-view/tree-view-guide.tsx b/src/registry/default/example/tree-view/tree-view-guide.tsx
@@ -3,6 +3,7 @@ import {
   TreeViewElement,
   File,
   Folder,
+  CollapseButton,
 } from "@/registry/default/extension/tree-view-api";
 
 type TOCProps = {
@@ -15,6 +16,7 @@ const TOC = ({ toc }: TOCProps) => {
       {toc.map((element, _) => (
         <TreeItem key={element.id} elements={[element]} />
       ))}
+      <CollapseButton elements={toc} expandAll={true} />
     </Tree>
   );
 };
@@ -97,50 +99,6 @@ const TOCWrapper = () => {
         },
       ],
     },
-    {
-      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",

diff --git a/src/registry/default/extension/tree-view-api.tsx b/src/registry/default/extension/tree-view-api.tsx
@@ -12,7 +12,6 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import useResizeObserver from "use-resize-observer";
 import { Button } from "@/components/ui/button";
 
 type TreeViewElement = {
@@ -134,14 +133,6 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
       }
     }, [initialSelectedId, elements]);
 
-    const {
-      ref: containerRef,
-      height,
-      width,
-    } = useResizeObserver<HTMLDivElement>({});
-
-    const style = props.style ?? { height, width };
-
     return (
       <TreeContext.Provider
         value={{
@@ -155,7 +146,7 @@ const Tree = forwardRef<HTMLDivElement, TreeViewProps>(
           closeIcon,
         }}
       >
-        <div ref={containerRef} className={cn("size-full", className)}>
+        <div className={cn("size-full", className)}>
           <ScrollArea ref={ref} className="h-full relative px-2">
             <AccordionPrimitive.Root
               type="multiple"