From d348a883648520a28b7c98f3cc5dbafba4ea7aad Mon Sep 17 00:00:00 2001 From: BelkacemYerfa Date: Thu, 28 Mar 2024 14:02:40 +0100 Subject: [PATCH] fix : tree view guide --- content/docs/tree-view.mdx | 49 ++----------------- package-lock.json | 13 ----- package.json | 1 - src/app/page.tsx | 3 +- src/components/banner.tsx | 4 +- .../playground/playground-preview.tsx | 6 +-- src/components/playground/playground.tsx | 15 +++++- src/lib/element-parser.ts | 2 +- .../example/tree-view/tree-view-guide.tsx | 46 +---------------- .../default/extension/tree-view-api.tsx | 11 +---- 10 files changed, 25 insertions(+), 125 deletions(-) diff --git a/content/docs/tree-view.mdx b/content/docs/tree-view.mdx index 3e59331..69eb892 100644 --- 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 ( ) } + ) } ``` +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. + TreeItem component Then the TreeItem element. diff --git a/package-lock.json b/package-lock.json index 97bd338..1d06e39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,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", @@ -9088,18 +9087,6 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-runner": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/react-runner/-/react-runner-1.0.3.tgz", - "integrity": "sha512-KyAzNzSVdrBc4A7aGW3FD0wVuujfgcBlyIGF0QVicJu0ucMpLYyTHE+PgBu82Iq698TPKRH+eEi6Mrq/e7OffA==", - "dependencies": { - "sucrase": "^3.21.0" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17 || ^18", - "react-dom": "^16.0.0 || ^17 || ^18" - } - }, "node_modules/react-style-singleton": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", diff --git a/package.json b/package.json index 8bc44fb..6d7d71c 100644 --- 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 index 0f17d9f..ffb9b22 100644 --- 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 (
diff --git a/src/components/banner.tsx b/src/components/banner.tsx index f55b14d..f3de838 100644 --- a/src/components/banner.tsx +++ b/src/components/banner.tsx @@ -4,7 +4,7 @@ import { cn } from "@/lib/utils"; export const Banner = () => { return ( -
+
🥳 New docs for shadcn extesnion are live. { 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 index aa81363..4d9aa88 100644 --- 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 ( - +
diff --git a/src/components/playground/playground.tsx b/src/components/playground/playground.tsx index c959a5d..334ad30 100644 --- 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) => { ) : ( file.file === chosenFile)?.content @@ -710,7 +716,12 @@ const Playground = memo(({ defaultCode, dependencies }: PlaygroundProps) => { {/* 
{defaultCode}
*/}
diff --git a/src/lib/element-parser.ts b/src/lib/element-parser.ts index a75a66b..674a939 100644 --- 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 index 3639213..eadb8db 100644 --- 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, _) => ( ))} + ); }; @@ -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 index 3bb3ce4..bcdba8b 100644 --- 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( } }, [initialSelectedId, elements]); - const { - ref: containerRef, - height, - width, - } = useResizeObserver({}); - - const style = props.style ?? { height, width }; - return ( ( closeIcon, }} > -
+