Merge pull request #27 from BelkacemYerfa/master

feat : update the dev branch to the latest changes of the components
BelkacemYerfa · Mar 31, 2024 · d7979ae · d7979ae
2 parents 86c0233 + 42ba5bd
commit d7979ae
Show file tree

Hide file tree

Showing 47 changed files with 1,046 additions and 1,259 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,5 @@ yarn-error.log*
 next-env.d.ts
 
 .contentlayer
+.vscode
 tsconfig.tsbuildinfo
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -69,36 +69,34 @@
 
   // Toggle excluded files
   "files.exclude": {
+    "**/.DS_Store": true,
+    "**/.editorconfig": true,
+    "**/.env.example": true,
+    "**/.eslintrc.cjs": true,
     "**/.git": true,
-    "**/.svn": true,
     "**/.hg": true,
-    "**/CVS": true,
-    "**/.DS_Store": true,
-    "**/Thumbs.db": true,
-    "**/node_modules": true,
-    "**/.next": true,
     "**/.husky": true,
-    "**/drizzle": true,
-    "**/dist": true,
-    "**/.todo.md": true,
-    "**/.vscode": true,
-    "**/.eslintrc.cjs": true,
-    "**/.editorconfig": true,
     "**/.lintstagedrc.mjs": true,
     "**/.markdownlint.json": true,
     "**/.markdownlintignore": true,
     "**/.prettierignore": true,
+    "**/.svn": true,
+    "**/.todo.md": true,
     "**/bun.lockb": true,
     "**/cspell.json": true,
+    "**/CVS": true,
+    "**/dist": true,
+    "**/drizzle": true,
+    "**/drizzle.config.ts": true,
+    "**/migrate.ts": true,
+    "**/next-env.d.ts": true,
+    "**/node_modules": true,
     "**/package-lock.json": true,
     "**/pnpm-lock.yaml": true,
-    "**/next-env.d.ts": true,
     "**/postcss.config.cjs": true,
     "**/prettier.config.js": true,
     "**/README.md": true,
-    "**/drizzle.config.ts": true,
-    "**/migrate.ts": true,
-    "**/.env.example": true
+    "**/Thumbs.db": true
   },
 
   // Misc

diff --git a/content/docs/breadcrumb.mdx b/content/docs/breadcrumb.mdx
@@ -6,7 +6,7 @@ links:
     url: https://ui.shadcn.com/docs/components/popover
 ---
 
-<ComponentPreview name="breadcrumb-example" className="[&_.preview]:p-2" />
+<ComponentPreview name="breadcrumb-demo" />
 
 ## Installation
 
@@ -217,3 +217,42 @@ import { Link } from "next/link";
 ```
 
 ## Examples
+
+### Orientation
+
+<ComponentPreview name="breadcrumb-orientation" />
+
+### BreadCrumb Separator
+
+<ComponentPreview name="breadcrumb-separator" />
+
+### BreadCrumb variants
+
+By default, the Breadcrumb component uses the `default` variant for each item. You can change the variant by passing the `variant` prop to the `BreadcrumbItem` component.
+
+<ComponentPreview name="breadcrumb-variants" />
+
+### BreadCrumb Active Item
+
+You can indicate the active item by passing the `isActive` prop to the `BreadcrumbItem` component.
+
+<ComponentPreview name="breadcrumb-active" />
+
+<Alert className="mt-4" variant="info">
+  <MdxIcons.Info className="size-4" />
+  <AlertTitle>Good to know</AlertTitle>
+  <AlertDescription>
+    The `variant` prop is the same as the button variants from shadcn, you can check the
+    button [documentation](https://ui.shadcn.com/docs/components/popover) for more information.
+  </AlertDescription>
+</Alert>
+
+### Active BreadCrumb
+
+<ComponentPreview name="breadcrumb-active" />
+
+### BreadCrumb Popover
+
+This popover can be used to display the full path if it's too long to fit in the screen.
+
+<ComponentPreview name="breadcrumb-popover" />
diff --git a/content/docs/carousel.mdx b/content/docs/carousel.mdx
@@ -24,7 +24,7 @@ links:
 <Step>Run the following command:</Step>
 
 ```bash
-npm embla-carousel embla-carousel-react
+npm i embla-carousel embla-carousel-react
 ```
 
 <Step>Copy and paste the following code into your project.</Step>

diff --git a/content/docs/changelog.mdx b/content/docs/changelog.mdx
@@ -0,0 +1,14 @@
+---
+title : Changelog
+description : All last changes in the project with announcements
+---
+
+
+## March 2024 - New docs
+
+We are happy to announce that we have updated our documentation. We have added new features. We hope you will find it useful. If you have any questions or suggestions, please let us know.
+
+
+
+
+
diff --git a/content/docs/file-upload.mdx b/content/docs/file-upload.mdx
@@ -8,7 +8,7 @@ links:
     url: https://sonner.emilkowal.ski/
 ---
 
-<ComponentPreview name="file-upload-example" />
+<ComponentPreview name="file-upload-demo" />
 
 ## Installation
 
@@ -208,3 +208,18 @@ import {
   </FileUploaderContent>
 </FileUploader>
 ```
+
+## Example
+
+
+### DropzoneOptions
+
+The `dropzoneOptions` prop is an object that can be passed to the `FileUploader` component to customize the useDropzone hook behavior. You can find the full list of options [here](https://react-dropzone.js.org/#src).
+
+<ComponentPreview name="file-upload-dropzone" />
+
+### Form
+
+This form uses the reSelect prop to remove all the current selected files when new files are selected.
+
+<ComponentPreview name="file-upload-zod" />
diff --git a/content/docs/introduction.mdx b/content/docs/introduction.mdx
@@ -13,7 +13,7 @@ Shadcn extension is a set of components that are built on top of Shadcn-ui . It
 
 - **Customizable**: Shadcn extension is designed to be highly customizable. It provides a set of components that can be easily customized to fit your needs.
 - **Easy to use**: Shadcn extension is designed to be easy to use. It provides a set of components that are easy to use and can be easily integrated into your web application.
-- **No need for installation**: Shadcn extension does not require any installation. just copy past the code and install the shadcn/ui component that it uses.
+- **No need for installation**: Shadcn extension does not require any installation. just Copy&Paste the code and install the shadcn/ui component that it uses.
 
 ## Getting Started
 
@@ -25,7 +25,7 @@ To install shadcn extension, you need to configure the shadcn/ui component that
 
 ## Usage
 
-To use Shadcn extension, you need to copy past the components that you want to use from the **shadcn extension** . You can then use these components in your web application.
+To use Shadcn extension, you need to Copy&Paste the components that you want to use from the **shadcn extension** . You can then use these components in your web application.
 
 Example:
 

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",
@@ -515,10 +471,12 @@ const elements :TreeViewElement[]  = [
 
 <Steps>
 
-<Step> First we create the TOC component </Step>
+<Step> TOC component </Step>
+
+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 = {
@@ -534,12 +492,17 @@ return (
           <TreeItem key={element.id}  elements={[element]} />
         )
       }
+      <CollapseButton elements={toc} expandAll={true} />
     </Tree>
   )
 }
 ```
 
-<Step> Then the TreeItem element </Step>
+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.
 
 ```tsx showLineNumbers title="components/Table_of_content/tree-item.tsx"
 import { File , Folder , TreeViewElement } from "@/components/extension/tree-view-api";

diff --git a/contentlayer.config.js b/contentlayer.config.js
@@ -61,11 +61,6 @@ export const Doc = defineDocumentType(() => ({
       default: true,
       required: false,
     },
-    state: {
-      type: "enum",
-      values: ["deprecated", "new", "updated"],
-      required: false,
-    },
   },
   computedFields,
 }));