From 1c326b4dbc6ae6962914eeb52b69d205c2a6598a Mon Sep 17 00:00:00 2001 From: BelkacemYerfa Date: Thu, 28 Mar 2024 10:07:54 +0100 Subject: [PATCH 1/3] fix : the keyboard func for breadcrumb component --- src/app/examples/page.tsx | 123 ------------------ src/components/layouts/toc.tsx | 4 +- src/registry/default/extension/breadcrumb.tsx | 8 +- .../default/extension/file-upload.tsx | 1 - 4 files changed, 7 insertions(+), 129 deletions(-) delete mode 100644 src/app/examples/page.tsx diff --git a/src/app/examples/page.tsx b/src/app/examples/page.tsx deleted file mode 100644 index 7244abc..0000000 --- a/src/app/examples/page.tsx +++ /dev/null @@ -1,123 +0,0 @@ -"use client"; - -import { - FileUploader, - FileInput, - FileUploaderContent, - FileUploaderItem, -} from "@/registry/default/extension/file-upload"; -import { useState } from "react"; -import { DropzoneOptions } from "react-dropzone"; -import z from "zod"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { useForm } from "react-hook-form"; -import { Form, FormField, FormItem, FormMessage } from "@/components/ui/form"; -import { Button } from "@/components/ui/button"; -import { toast } from "sonner"; -import { Input } from "@/components/ui/input"; -import FileUploaderTest from "@/registry/default/example/file-upload-demo"; -import { AspectRatio } from "@/components/ui/aspect-ratio"; -import Image from "next/image"; - -export default function PageExample() { - return ( -
-
-

Page Examples

-

Tree view examples

-
- -
- ); -} - -const CardForm = z.object({ - name: z.string().optional(), - description: z.string().optional(), - files: z - .array( - z.instanceof(File).refine((file) => file.size < 4 * 1024 * 1024, { - message: "File size must be less than 4MB", - }) - ) - .max(5, { - message: "Maximum 5 files are allowed", - }) - .nullable(), -}); - -type CardFormType = z.infer; - -const ExampleComp = () => { - const form = useForm({ - resolver: zodResolver(CardForm), - defaultValues: { - name: "", - description: "", - files: null, - }, - }); - - const dropzone = { - multiple: true, - maxFiles: 5, - maxSize: 4 * 1024 * 1024, - } satisfies DropzoneOptions; - - const onSubmit = (data: CardFormType) => { - console.log(data); - toast.success(`Files are ${data.files}`); - }; - - return ( -
-
- - ( - - - -
-

Drop files here

-
- - - {field.value?.map((file, i) => ( - - - {file.name} - - - ))} - - - - - )} - /> - - - -
- ); -}; diff --git a/src/components/layouts/toc.tsx b/src/components/layouts/toc.tsx index 8356ea6..80beb71 100644 --- a/src/components/layouts/toc.tsx +++ b/src/components/layouts/toc.tsx @@ -31,7 +31,7 @@ export const DocMainTOC = ({ toc, slug }: TocProps) => {
Questions? Give us feedback @@ -39,7 +39,7 @@ export const DocMainTOC = ({ toc, slug }: TocProps) => { Edit this page diff --git a/src/registry/default/extension/breadcrumb.tsx b/src/registry/default/extension/breadcrumb.tsx index 2b94235..d8b8cfa 100644 --- a/src/registry/default/extension/breadcrumb.tsx +++ b/src/registry/default/extension/breadcrumb.tsx @@ -81,6 +81,7 @@ export const BreadCrumb = ({ const prevIndex = currentIndex < 0 ? length : currentIndex; setActiveIndex(value[prevIndex]); }; + console.log("right"); switch (e.key) { case "ArrowDown": @@ -143,12 +144,13 @@ export const BreadCrumb = ({ }} >
{children}
@@ -214,8 +216,8 @@ export const BreadCrumbItem = forwardRef< className, isSelected ? "bg-muted focus-visible:ring-0 ring-0" : "" )} - {...props} onClick={() => setActiveIndex(index)} + {...props} > {children}
diff --git a/src/registry/default/extension/file-upload.tsx b/src/registry/default/extension/file-upload.tsx index 620ab1e..2c3be9a 100644 --- a/src/registry/default/extension/file-upload.tsx +++ b/src/registry/default/extension/file-upload.tsx @@ -22,7 +22,6 @@ import { import { toast } from "sonner"; import { Trash2 as RemoveIcon } from "lucide-react"; import { buttonVariants } from "@/components/ui/button"; -import { ScrollArea } from "@/components/ui/scroll-area"; type FileUploaderContextType = { dropzoneState: DropzoneState; From d348a883648520a28b7c98f3cc5dbafba4ea7aad Mon Sep 17 00:00:00 2001 From: BelkacemYerfa Date: Thu, 28 Mar 2024 14:02:40 +0100 Subject: [PATCH 2/3] 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, }} > -
+
Date: Thu, 28 Mar 2024 23:02:45 +0100 Subject: [PATCH 3/3] fix : the banner website naming --- src/components/banner.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/banner.tsx b/src/components/banner.tsx index f3de838..6eceff9 100644 --- a/src/components/banner.tsx +++ b/src/components/banner.tsx @@ -1,11 +1,12 @@ 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 (
- 🥳 New docs for shadcn extesnion are live. + 🥳 New docs for {siteConfig.name} are live.