version 1.12.0 :add File Tree

contents/docs/getting-started/changelog/index.mdx

@@ -8,6 +8,44 @@ date: 24-05-2025
 
 > This changelog contains a list of all the changes made to the DocuBook template. It will be updated with each new release and will include information about new features, bug fixes, and other improvements.
 
+<div className="sr-only">
+### v 1.12.0
+</div>
+
+<Release version="1.12.0" date="2025-05-28" title="New File Tree Component and enhancements for existing components or features">
+  <Changes type="added">
+    - New FileTree component for displaying hierarchical file structures
+    - Support for nested folders and files with expand/collapse functionality
+    - Hover effects showing file extensions
+    - Dark mode support with modern styling
+    - Keyboard navigation and accessibility features
+    - add toc-observer data attribute to detect toc section
+    - cli to copy from path npm registry
+  </Changes>
+  <Changes type="improved">
+    - search dialog hover effect return key
+    - search icon showing on mobile screens
+  </Changes>
+  <Changes type="fixed">
+    - fix search dialog on mobile screens
+    - fix release note component eslint error on mdx when rendering
+    - fix mob-toc callback function
+    - fix toc height issue when toc section is longer than screen height
+  </Changes>
+  <Changes type="removed">
+    - remove prompts depedencies
+    - remove degit depedencies
+    - remove prompts functions
+    - remove degit functions
+    - remove prompts and degit from package.json
+    - remove clone repository using git
+  </Changes>
+</Release>
+
+<Note type="note" title="Note">
+  on this version `1.12.0`, we remove clone repository using git and replace it with cli to copy from path npm registry
+</Note>
+
 <div className="sr-only">
 ### v 1.11.0
 </div>

contents/docs/getting-started/components/file-tree/index.mdx

@@ -0,0 +1,109 @@
+---
+title: File Tree Component
+description: A customizable file tree component for displaying hierarchical file structures in your documentation.
+date: 28-05-2025
+---
+
+The File Tree component allows you to display hierarchical file structures in your documentation with collapsible folders and files.
+
+## Basic Usage
+
+```
+<Files>
+  <Folder name="src">
+    <File name="App.tsx" />
+    <File name="index.tsx" />
+    <Folder name="components">
+      <File name="Button.tsx" />
+      <File name="Card.tsx" />
+    </Folder>
+    <Folder name="pages">
+      <File name="Home.tsx" />
+      <File name="About.tsx" />
+    </Folder>
+  </Folder>
+</Files>
+```
+
+Render As:
+<Files>
+  <Folder name="src">
+    <File name="App.tsx" />
+    <File name="index.tsx" />
+    <Folder name="components">
+      <File name="Button.tsx" />
+      <File name="Card.tsx" />
+    </Folder>
+    <Folder name="pages">
+      <File name="Home.tsx" />
+      <File name="About.tsx" />
+    </Folder>
+  </Folder>
+</Files>
+
+## Props
+
+### Files
+
+The root component that wraps the entire file tree.
+
+### Folder
+
+| Prop     | Type     | Required | Description                           |
+|----------|----------|----------|---------------------------------------|
+| name     | string   | Yes      | The name of the folder                |
+| children | ReactNode | No      | Child elements (File or Folder)       |
+
+### File
+
+| Prop | Type   | Required | Description                |
+|------|--------|----------|----------------------------|
+| name | string | Yes      | The name of the file       |
+
+
+## Examples
+
+### Nested Folder Structure
+
+```
+<Files>
+  <Folder name="project-root">
+    <File name="package.json" />
+    <File name="tsconfig.json" />
+    <Folder name="src">
+      <File name="index.ts" />
+      <Folder name="components">
+        <File name="Button.tsx" />
+        <File name="Card.tsx" />
+      </Folder>
+    </Folder>
+  </Folder>
+</Files>
+```
+
+### Minimal Example
+
+```
+<Files>
+  <Folder name="components">
+    <File name="Button.tsx" />
+    <File name="Input.tsx" />
+  </Folder>
+</Files>
+```
+
+## Best Practices
+
+1. Keep the nesting level reasonable (recommended max 3-4 levels deep)
+2. Use clear and descriptive names for files and folders
+3. Consider the user experience when displaying large file structures
+4. Use consistent naming conventions throughout your file tree
+
+## Accessibility
+
+The File Tree component includes built-in accessibility features:
+
+- Keyboard navigation support
+- ARIA attributes for screen readers
+- Focus management for interactive elements
+- High contrast mode support