bump docubook version 1.13.6

2025-06-14 20:33:39 +07:00
parent 3da46325cf
commit c30eaf295d
39 changed files with 551 additions and 9035 deletions
--- a/components/markdown/FileTreeMdx.tsx
+++ b/components/markdown/FileTreeMdx.tsx
@@ -0,0 +1,138 @@
+'use client';
+
+import React, { useState, ReactNode, Children, isValidElement, cloneElement } from 'react';
+import { ChevronRight, File as FileIcon, Folder as FolderIcon, FolderOpen } from 'lucide-react';
+
+interface FileProps {
+  name: string;
+  children?: ReactNode;
+}
+
+const FileComponent = ({ name }: FileProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const fileExtension = name.split('.').pop()?.toUpperCase();
+
+  return (
+    <div
+      className={`
+        flex items-center gap-2 py-1.5 pl-7 pr-3 text-sm rounded-md
+        transition-colors duration-150 cursor-default select-none
+        ${isHovered ? 'bg-accent/10' : 'hover:bg-muted/50'}
+      `}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      tabIndex={-1}
+    >
+      <FileIcon className={`
+        h-3.5 w-3.5 flex-shrink-0 transition-colors
+        ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+      `} />
+      <span className="font-mono text-sm text-foreground truncate">{name}</span>
+      {isHovered && fileExtension && (
+        <span className="ml-auto text-xs text-muted-foreground/80">
+          {fileExtension}
+        </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
+          transition-colors duration-150 select-none
+          ${isHovered ? 'bg-muted/60' : ''}
+          ${isOpen ? 'text-foreground' : 'text-foreground/80'}
+          ${hasChildren ? 'cursor-pointer' : 'cursor-default'}
+        `}
+        onClick={() => hasChildren && setIsOpen(!isOpen)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        tabIndex={-1}
+        onKeyDown={(e) => e.preventDefault()}
+      >
+        {hasChildren ? (
+          <ChevronRight
+            className={`
+              h-3.5 w-3.5 flex-shrink-0 transition-transform duration-200
+              ${isOpen ? 'rotate-90' : ''}
+              ${isHovered ? 'text-foreground/70' : 'text-muted-foreground'}
+            `}
+          />
+        ) : (
+          <div className="w-3.5" />
+        )}
+        {isOpen ? (
+          <FolderOpen className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent' : 'text-muted-foreground'}
+          `} />
+        ) : (
+          <FolderIcon className={`
+            h-4 w-4 flex-shrink-0 transition-colors
+            ${isHovered ? 'text-accent/80' : 'text-muted-foreground/80'}
+          `} />
+        )}
+        <span className={`
+          font-medium transition-colors duration-150
+          ${isHovered ? 'text-accent' : ''}
+        `}>
+          {name}
+        </span>
+      </div>
+      {isOpen && hasChildren && (
+        <div className="ml-5 border-l-2 border-muted/50 pl-2">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export const Files = ({ children }: { children: ReactNode }) => {
+  return (
+    <div
+      className="
+        rounded-xl border border-muted/50
+        bg-card/50 backdrop-blur-sm
+        shadow-sm overflow-hidden
+        transition-all duration-200
+        hover:shadow-md hover:border-muted/60
+      "
+      onKeyDown={(e) => e.preventDefault()}
+    >
+      <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;