@docubook/create 1.11.3 → 1.13.0

package/src/dist/components/context-popover.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import { useState, useEffect } from "react";
+import { ROUTES, EachRoute } from "@/lib/routes-config";
+import { cn } from "@/lib/utils";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import * as LucideIcons from "lucide-react";
+import { ChevronsUpDown, Check, type LucideIcon } from "lucide-react";
+
+interface ContextPopoverProps {
+  className?: string;
+}
+
+// Get all root-level routes with context
+function getContextRoutes(): EachRoute[] {
+  return ROUTES.filter(route => route.context);
+}
+
+// Get the first item's href from a route
+function getFirstItemHref(route: EachRoute): string {
+  return route.items?.[0]?.href ? `${route.href}${route.items[0].href}` : route.href;
+}
+
+// Get the active context route from the current path
+function getActiveContextRoute(path: string): EachRoute | undefined {
+  if (!path.startsWith('/docs')) return undefined;
+  const docPath = path.replace(/^\/docs/, '');
+  return getContextRoutes().find(route => docPath.startsWith(route.href));
+}
+
+// Get icon component by name
+function getIcon(name: string) {
+  const Icon = LucideIcons[name as keyof typeof LucideIcons] as LucideIcon | undefined;
+  if (!Icon) return <LucideIcons.FileQuestion className="h-4 w-4" />;
+  return <Icon className="h-4 w-4" />;
+}
+
+export default function ContextPopover({ className }: ContextPopoverProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [activeRoute, setActiveRoute] = useState<EachRoute>();
+  const contextRoutes = getContextRoutes();
+
+  useEffect(() => {
+    if (pathname.startsWith("/docs")) {
+      setActiveRoute(getActiveContextRoute(pathname));
+    } else {
+      setActiveRoute(undefined);
+    }
+  }, [pathname]);
+
+  if (!pathname.startsWith("/docs") || contextRoutes.length === 0) {
+    return null;
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className={cn(
+            "w-full max-w-[240px] flex items-center justify-between font-semibold text-foreground px-0 pt-8",
+            "hover:bg-transparent hover:text-foreground",
+            className
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {activeRoute?.context?.icon && (
+              <span className="text-primary bg-primary/10 border border-primary rounded p-0.5">
+                {getIcon(activeRoute.context.icon)}
+              </span>
+            )}
+            <span className="truncate text-sm">
+              {activeRoute?.context?.title || activeRoute?.title || 'Select context'}
+            </span>
+          </div>
+          <ChevronsUpDown className="h-4 w-4 text-foreground/50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        className="w-64 p-2"
+        align="start"
+        sideOffset={6}
+      >
+        <div className="space-y-1">
+          {contextRoutes.map((route) => {
+            const isActive = activeRoute?.href === route.href;
+            const firstItemPath = getFirstItemHref(route);
+            const contextPath = `/docs${firstItemPath}`;
+
+            return (
+              <button
+                key={route.href}
+                onClick={() => router.push(contextPath)}
+                className={cn(
+                  "relative flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm",
+                  "text-left outline-none transition-colors",
+                  isActive
+                    ? "bg-primary/20 text-primary"
+                    : "text-foreground/80 hover:bg-primary/20"
+                )}
+              >
+                {route.context?.icon && (
+                  <span className={cn(
+                    "flex h-4 w-4 items-center justify-center",
+                    isActive ? "text-primary" : "text-foreground/60"
+                  )}>
+                    {getIcon(route.context.icon)}
+                  </span>
+                )}
+                <div className="flex-1 min-w-0 overflow-hidden">
+                  <div className="truncate font-medium">
+                    {route.context?.title || route.title}
+                  </div>
+                  {route.context?.description && (
+                    <div className="text-xs text-muted-foreground truncate text-ellipsis overflow-hidden max-w-full">
+                      {route.context.description}
+                    </div>
+                  )}
+                </div>
+                {isActive && (
+                  <Check className="h-3.5 w-3.5" />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/dist/components/docs-menu.tsx

@@ -1,44 +1,62 @@
 "use client";
 
-import { ROUTES } from "@/lib/routes-config";
+import { ROUTES, EachRoute } from "@/lib/routes-config";
 import SubLink from "./sublink";
 import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
 
 interface DocsMenuProps {
   isSheet?: boolean;
   className?: string;
 }
 
+// Get the current context from the path
+function getCurrentContext(path: string): string | undefined {
+  if (!path.startsWith('/docs')) return undefined;
+
+  // Extract the first segment after /docs/
+  const match = path.match(/^\/docs\/([^\/]+)/);
+  return match ? match[1] : undefined;
+}
+
+// Get the route that matches the current context
+function getContextRoute(contextPath: string): EachRoute | undefined {
+  return ROUTES.find(route => {
+    const normalizedHref = route.href.replace(/^\/+|\/+$/g, '');
+    return normalizedHref === contextPath;
+  });
+}
+
 export default function DocsMenu({ isSheet = false, className = "" }: DocsMenuProps) {
   const pathname = usePathname();
 
   // Skip rendering if not on a docs page
   if (!pathname.startsWith("/docs")) return null;
 
+  // Get the current context
+  const currentContext = getCurrentContext(pathname);
+
+  // Get the route for the current context
+  const contextRoute = currentContext ? getContextRoute(currentContext) : undefined;
+
+  // If no context route is found, don't render anything
+  if (!contextRoute) return null;
+
   return (
     <nav
       aria-label="Documentation navigation"
-      className={className}
+      className={cn("transition-all duration-200", className)}
     >
-      <ul className="flex flex-col gap-3.5 mt-5 pr-2 pb-6">
-        {ROUTES.map((item, index) => {
-          // Normalize href - hapus leading/trailing slashes
-          const normalizedHref = `/${item.href.replace(/^\/+|\/+$/g, '')}`;
-          const itemHref = `/docs${normalizedHref}`;
-
-          const modifiedItems = {
-            ...item,
-            href: itemHref,
-            level: 0,
-            isSheet,
-          };
-
-          return (
-            <li key={`${item.title}-${index}`}>
-              <SubLink {...modifiedItems} />
-            </li>
-          );
-        })}
+      <ul className="flex flex-col gap-1.5 py-4">
+        {/* Display only the items from the current context */}
+        <li key={contextRoute.title}>
+          <SubLink
+            {...contextRoute}
+            href={`/docs${contextRoute.href}`}
+            level={0}
+            isSheet={isSheet}
+          />
+        </li>
       </ul>
     </nav>
   );

package/src/dist/components/leftbar.tsx

@@ -10,11 +10,11 @@ import {
 import { Logo, NavMenu } from "@/components/navbar";
 import { Button } from "@/components/ui/button";
 import { AlignLeftIcon, PanelLeftClose, PanelLeftOpen } from "lucide-react";
-import { FooterButtons } from "@/components/footer";
 import { DialogTitle, DialogDescription } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import DocsMenu from "@/components/docs-menu";
 import { ModeToggle } from "@/components/theme-toggle";
+import ContextPopover from "@/components/context-popover";
 
 // Toggle Button Component
 export function ToggleButton({
@@ -52,9 +52,14 @@ export function Leftbar() {
       ${collapsed ? "w-[24px]" : "w-[280px]"} flex flex-col pr-2`}
     >
       <ToggleButton collapsed={collapsed} onToggle={toggleCollapse} />
-      {/* Scrollable DocsMenu */}
+      {/* Scrollable Content */}
       <ScrollArea className="flex-1 px-0.5 pb-4">
-        {!collapsed && <DocsMenu />}
+        {!collapsed && (
+          <div className="space-y-2">
+            <ContextPopover />
+            <DocsMenu />
+          </div>
+        )}
       </ScrollArea>
     </aside>
   );
@@ -82,7 +87,8 @@ export function SheetLeftbar() {
           <div className="flex flex-col gap-2.5 mt-3 mx-2 px-5">
             <NavMenu isSheet />
           </div>
-          <div className="mx-2 px-5">
+          <div className="mx-2 px-5 space-y-2">
+            <ContextPopover />
             <DocsMenu isSheet />
           </div>
           <div className="flex w-2/4 px-5">

package/src/dist/components/markdown/FileTreeMdx.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import React, { useState, ReactNode, Children, isValidElement, cloneElement } from 'react';
+import { ChevronRight, ChevronDown, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
+
+interface FileTreeProps {
+  children: ReactNode;
+  defaultOpen?: boolean;
+}
+
+interface FileProps {
+  name: string;
+  children?: ReactNode;
+}
+
+const FileComponent = ({ name }: FileProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className={`
+        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm
+        transition-all duration-200 ease-in-out rounded-md
+        ${isHovered
+          ? 'bg-blue-50 dark:bg-blue-900/30'
+          : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}
+      `}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <FileIcon className={`h-3.5 w-3.5 transition-colors ${isHovered ? 'text-blue-500' : 'text-gray-400 dark:text-gray-500'}`} />
+      <span className="font-mono text-sm text-gray-700 dark:text-gray-300">{name}</span>
+      {isHovered && (
+        <span className="ml-auto text-xs text-gray-400 dark:text-gray-500">
+          {name.split('.').pop()?.toUpperCase()}
+        </span>
+      )}
+    </div>
+  );
+};
+
+const FolderComponent = ({ name, children }: FileProps) => {
+  const [isOpen, setIsOpen] = useState(true); // Set to true by default
+  const [isHovered, setIsHovered] = useState(false);
+  const hasChildren = React.Children.count(children) > 0;
+
+  return (
+    <div className="relative">
+      <div
+        className={`
+          flex items-center gap-2 py-1.5 pl-4 pr-3 rounded-md cursor-pointer
+          transition-all duration-200 ease-in-out
+          ${isHovered ? 'bg-gray-50 dark:bg-gray-800/50' : ''}
+          ${isOpen ? 'text-blue-600 dark:text-blue-400' : 'text-gray-800 dark:text-gray-200'}
+        `}
+        onClick={() => setIsOpen(!isOpen)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        {hasChildren ? (
+          <ChevronRight
+            className={`h-3.5 w-3.5 transition-transform duration-200 ${isOpen ? 'transform rotate-90' : ''}`}
+          />
+        ) : (
+          <div className="w-3.5" />
+        )}
+        {isOpen ? (
+          <FolderOpen className="h-4 w-4 text-blue-500 dark:text-blue-400" />
+        ) : (
+          <FolderIcon className="h-4 w-4 text-blue-400 dark:text-blue-500" />
+        )}
+        <span className="font-medium">{name}</span>
+      </div>
+      {isOpen && hasChildren && (
+        <div className="ml-5 border-l-2 border-gray-100 dark:border-gray-700/50 pl-2">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Files = ({ children }: { children: ReactNode }) => {
+  return (
+    <div className="
+      rounded-xl border border-gray-100 dark:border-gray-700/50
+      bg-white/50 dark:bg-gray-800/30 backdrop-blur-sm
+      shadow-sm overflow-hidden
+      transition-all duration-200
+      hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600/50
+    ">
+      <div className="p-2">
+        {Children.map(children, (child, index) => {
+          if (isValidElement(child)) {
+            return cloneElement(child, { key: index });
+          }
+          return null;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export const Folder = ({ name, children }: FileProps) => {
+  return <FolderComponent name={name}>{children}</FolderComponent>;
+};
+
+export const File = ({ name }: FileProps) => {
+  return <FileComponent name={name} />;
+};
+
+// MDX Components
+export const FileTreeMdx = {
+  Files,
+  File,
+  Folder,
+};
+
+export default FileTreeMdx;

package/src/dist/components/search.tsx

@@ -17,6 +17,23 @@ import {
 import Anchor from "./anchor";
 import { advanceSearch, cn } from "@/lib/utils";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { page_routes } from "@/lib/routes-config";
+
+// Define the ContextInfo type to match the one in routes-config
+type ContextInfo = {
+  icon: string;
+  description: string;
+  title?: string;
+};
+
+type SearchResult = {
+  title: string;
+  href: string;
+  noLink?: boolean;
+  items?: undefined;
+  score?: number;
+  context?: ContextInfo;
+};
 
 export default function Search() {
   const router = useRouter();
@@ -39,10 +56,25 @@ export default function Search() {
     };
   }, []);
 
-  const filteredResults = useMemo(
-    () => advanceSearch(searchedInput.trim()),
-    [searchedInput]
-  );
+  const filteredResults = useMemo<SearchResult[]>(() => {
+    const trimmedInput = searchedInput.trim();
+
+    // If search input is empty or less than 3 characters, show initial suggestions
+    if (trimmedInput.length < 3) {
+      return page_routes
+        .filter((route: { href: string }) => !route.href.endsWith('/')) // Filter out directory routes
+        .slice(0, 6) // Limit to 6 posts
+        .map((route: { title: string; href: string; noLink?: boolean; context?: ContextInfo }) => ({
+          title: route.title,
+          href: route.href,
+          noLink: route.noLink,
+          context: route.context
+        }));
+    }
+
+    // For search with 3 or more characters, use the advance search
+    return advanceSearch(trimmedInput) as unknown as SearchResult[];
+  }, [searchedInput]);
 
   useEffect(() => {
     setSelectedIndex(0);

package/src/dist/contents/docs/{getting-started/changelog → changelog/version-1}/index.mdx

@@ -8,6 +8,63 @@ 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.13.0
+</div>
+
+<Release version="1.13.0" date="2025-05-29" title="Context Menu for organize file and folder">
+  <Changes type="added">
+    - New ContextMenu component for organizing file and folder
+    - Nested docs folder and file support with context menu
+  </Changes>
+  <Changes type="improved">
+    - improve routes-config with context menu
+    - improve docu.json with context menu
+    - improve leftbar with context menu
+    - improve docs-menu with context menu
+    - improve search dialog limit result to 6 post per suggestion
+    - improve search result typing 3 characters to show suggestion
+  </Changes>
+</Release>
+
+<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>

package/src/dist/contents/docs/{getting-started/components → components}/card/index.mdx

@@ -41,9 +41,9 @@ The Card component is a component used to create cards that can be used to displ
 
 <Tabs defaultValue="link" className="pt-5 pb-1">
   <TabsList>
-    <TabsTrigger value="link">Card with Link & Icon</TabsTrigger>
-    <TabsTrigger value="horizontal">Card Horizontal</TabsTrigger>
-    <TabsTrigger value="simple">Card Simple</TabsTrigger>
+    <TabsTrigger value="link">Link & Icon</TabsTrigger>
+    <TabsTrigger value="horizontal">Horizontal</TabsTrigger>
+    <TabsTrigger value="simple">Simple</TabsTrigger>
   </TabsList>
   <TabsContent value="link">
     ```markdown

package/src/dist/contents/docs/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

package/src/dist/contents/docs/getting-started/customize/index.mdx

@@ -90,5 +90,3 @@ For both options, ensure that you add the variable to `tailwind.config.ts`:
     }
 }
 ```
-
-For theme and colors, refer to the [Theme section](/docs/getting-started/themes)

package/src/dist/contents/docs/getting-started/installation/index.mdx

@@ -15,7 +15,7 @@ To get started, you can clone the DocuBook repository directly from GitHub.
     Begin by cloning the DocuBook repository from GitHub:
 
     ```bash
-    git clone --branch starter https://gitlab.com/mywildancloud/docubook.git
+    git clone --branch main https://github.com/DocuBook/docubook.git
     ```
 
   </StepperItem>

package/src/dist/contents/docs/getting-started/introduction/index.mdx

@@ -13,7 +13,7 @@ DocuBook is proudly **open-source**! 🎉 We believe in creating an accessible,
 
 <Note title="Contribute">
   Interested in helping us improve? Check out our [GitHub
-  repository](https://github.com/gitfromwildan/docubook) to get started! From
+  repository](https://github.com/DocuBook/docubook) to get started! From
   feature suggestions to bug fixes, all contributions are welcome.
 </Note>