boltdocs 1.5.0 → 1.6.0

package/src/client/theme/components/mdx/FileTree.tsx

@@ -0,0 +1,229 @@
+import React, { Children, isValidElement, useState } from "react";
+import {
+  Folder,
+  FileText,
+  File,
+  FileCode,
+  FileImage,
+  ChevronRight,
+} from "lucide-react";
+
+export interface FileTreeProps {
+  children: React.ReactNode;
+}
+
+function getTextContent(node: React.ReactNode): string {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return node.toString();
+  if (Array.isArray(node)) return node.map(getTextContent).join("");
+  if (isValidElement(node)) {
+    return getTextContent((node.props as any).children);
+  }
+  return "";
+}
+
+function getFileIcon(filename: string) {
+  const name = filename.toLowerCase();
+
+  if (
+    name.endsWith(".ts") ||
+    name.endsWith(".tsx") ||
+    name.endsWith(".js") ||
+    name.endsWith(".jsx") ||
+    name.endsWith(".json") ||
+    name.endsWith(".mjs") ||
+    name.endsWith(".cjs") ||
+    name.endsWith(".astro") ||
+    name.endsWith(".vue") ||
+    name.endsWith(".svelte")
+  ) {
+    return (
+      <FileCode size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
+    );
+  }
+
+  if (name.endsWith(".md") || name.endsWith(".mdx") || name.endsWith(".txt")) {
+    return (
+      <FileText size={16} strokeWidth={2} className="ld-file-tree__icon-file" />
+    );
+  }
+
+  if (
+    name.endsWith(".png") ||
+    name.endsWith(".jpg") ||
+    name.endsWith(".jpeg") ||
+    name.endsWith(".svg") ||
+    name.endsWith(".gif")
+  ) {
+    return (
+      <FileImage
+        size={16}
+        strokeWidth={2}
+        className="ld-file-tree__icon-file"
+      />
+    );
+  }
+
+  return <File size={16} strokeWidth={2} className="ld-file-tree__icon-file" />;
+}
+
+// Helper to reliably check for ul and li elements, including MDX wrappers
+function isListElement(node: any, tag: "ul" | "li"): boolean {
+  if (typeof node.type === "string") {
+    return node.type === tag;
+  }
+  if (typeof node.type === "function") {
+    return node.type.name === tag || node.type.name?.toLowerCase() === tag;
+  }
+  // MDX specific wrapper detection
+  if (node.props && node.props.originalType === tag) {
+    return true;
+  }
+  if (node.props && node.props.mdxType === tag) {
+    return true;
+  }
+  return false;
+}
+
+function FolderNode({
+  labelText,
+  nestedNodes,
+  depth,
+}: {
+  labelText: string;
+  nestedNodes: React.ReactNode[];
+  depth: number;
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <li className="ld-file-tree__item">
+      <div
+        className="ld-file-tree__label ld-file-tree__label--folder"
+        onClick={() => setIsOpen(!isOpen)}
+        style={{ cursor: "pointer" }}
+      >
+        <span className="ld-file-tree__icon ld-file-tree__icon--chevron">
+          <ChevronRight
+            size={14}
+            className={`ld-file-tree__chevron ${isOpen ? "ld-file-tree__chevron--open" : ""}`}
+            strokeWidth={3}
+          />
+        </span>
+        <span className="ld-file-tree__icon">
+          <Folder
+            size={16}
+            strokeWidth={2}
+            className="ld-file-tree__icon-folder"
+            fill="currentColor"
+            fillOpacity={0.15}
+          />
+        </span>
+        <span className="ld-file-tree__name">{labelText}</span>
+      </div>
+      {isOpen && nestedNodes.length > 0 && (
+        <div className="ld-file-tree__nested">
+          {nestedNodes.map((child, index) => (
+            <React.Fragment key={index}>
+              {parseNode(child, depth)}
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+    </li>
+  );
+}
+
+function parseNode(node: React.ReactNode, depth: number = 0): React.ReactNode {
+  if (!isValidElement(node)) {
+    return node;
+  }
+
+  if (isListElement(node, "ul")) {
+    return (
+      <ul
+        className={`ld-file-tree__list ${depth === 0 ? "ld-file-tree__list--root" : ""}`}
+      >
+        {Children.map((node.props as any).children, (child, index) => (
+          <React.Fragment key={index}>
+            {parseNode(child, depth + 1)}
+          </React.Fragment>
+        ))}
+      </ul>
+    );
+  }
+
+  if (isListElement(node, "li")) {
+    const children = Children.toArray((node.props as any).children);
+
+    // Find nested list indicating a directory
+    const nestedListIndex = children.findIndex(
+      (child) => isValidElement(child) && isListElement(child, "ul"),
+    );
+    const hasNested = nestedListIndex !== -1;
+
+    // Separate text label from nested items
+    const labelNodes = hasNested
+      ? children.slice(0, nestedListIndex)
+      : children;
+    const nestedNodes = hasNested ? children.slice(nestedListIndex) : [];
+
+    const rawLabelContent = getTextContent(labelNodes).trim();
+    const isExplicitDir = rawLabelContent.endsWith("/");
+    const labelText = isExplicitDir
+      ? rawLabelContent.slice(0, -1)
+      : rawLabelContent;
+
+    const isFolder = hasNested || isExplicitDir;
+
+    if (isFolder) {
+      return (
+        <FolderNode
+          labelText={labelText}
+          nestedNodes={nestedNodes}
+          depth={depth}
+        />
+      );
+    }
+
+    return (
+      <li className="ld-file-tree__item">
+        <div className="ld-file-tree__label ld-file-tree__label--file">
+          <span className="ld-file-tree__icon ld-file-tree__icon--spacer"></span>
+          <span className="ld-file-tree__icon">{getFileIcon(labelText)}</span>
+          <span className="ld-file-tree__name">{labelText}</span>
+        </div>
+      </li>
+    );
+  }
+
+  // If node is e.g. a paragraph injected by MDX wrapping the list
+  if ((node.props as any).children) {
+    return Children.map((node.props as any).children, (child, index) => (
+      <React.Fragment key={index}>{parseNode(child, depth)}</React.Fragment>
+    ));
+  }
+
+  return node;
+}
+
+/**
+ * FileTree component displays a customized, styled tree structure for markdown lists.
+ *
+ * ```mdx
+ * <FileTree>
+ * - src/
+ *   - index.ts
+ *   - components/
+ *     - Button.tsx
+ * - package.json
+ * </FileTree>
+ * ```
+ */
+export function FileTree({ children }: FileTreeProps) {
+  return (
+    <div className="ld-file-tree" dir="ltr">
+      {Children.map(children, (child) => parseNode(child, 0))}
+    </div>
+  );
+}

package/src/client/theme/components/mdx/Tabs.tsx

@@ -4,7 +4,6 @@ import { NPM } from "../../icons/npm";
 import { Pnpm } from "../../icons/pnpm";
 import { Bun } from "../../icons/bun";
 import { Deno } from "../../icons/deno";
-import { Yarn } from "../../icons/yarn";
 
 /* ─── Tab (individual panel) ──────────────────────────────── */
 export interface TabProps {
@@ -43,9 +42,8 @@ export interface TabsProps {
 
 const getIconForLabel = (label: string) => {
   const l = label.toLowerCase();
-  if (l.includes("npm")) return <NPM />;
   if (l.includes("pnpm")) return <Pnpm />;
-  if (l.includes("yarn")) return <Yarn />;
+  if (l.includes("npm")) return <NPM />;
   if (l.includes("bun")) return <Bun />;
   if (l.includes("deno")) return <Deno />;
   return null;
@@ -58,7 +56,6 @@ const getIconForLabel = (label: string) => {
  * <Tabs>
  *   <Tab label="npm">npm install boltdocs</Tab>
  *   <Tab label="pnpm">pnpm add boltdocs</Tab>
- *   <Tab label="yarn">yarn add boltdocs</Tab>
  * </Tabs>
  * ```
  */

package/src/client/theme/components/mdx/index.ts

@@ -16,3 +16,6 @@ export type { AdmonitionProps } from "./Admonition";
 
 export { List } from "./List";
 export type { ListProps } from "./List";
+
+export { FileTree } from "./FileTree";
+export type { FileTreeProps } from "./FileTree";

package/src/client/theme/components/mdx/mdx-components.css

@@ -430,3 +430,112 @@
 .ld-list--arrow .ld-list__icon {
   color: var(--ld-color-primary);
 }
+
+/* ─── FileTree ────────────────────────────────────────────── */
+.ld-file-tree {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border-radius: var(--ld-radius-lg);
+  border: 1px solid var(--ld-border-subtle);
+  background: var(--ld-bg-soft);
+  font-family: var(--ld-font-mono);
+  font-size: 0.875rem;
+  overflow-x: auto;
+}
+
+.ld-file-tree__list {
+  list-style: none !important;
+  margin: 0 !important;
+  padding: 0;
+  position: relative;
+}
+
+.ld-file-tree__list:not(.ld-file-tree__list--root) {
+  padding-left: 1.25rem;
+  margin-top: 0.25rem !important;
+  position: relative;
+}
+
+/* Vertical line for nested folders */
+.ld-file-tree__list:not(.ld-file-tree__list--root)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.45rem; /* align with folder icon */
+  width: 1px;
+  background-color: var(--ld-border-subtle);
+  z-index: 0;
+}
+
+.ld-file-tree__item {
+  position: relative;
+  margin: 0.2rem 0 !important;
+  padding: 0 !important;
+  display: block !important;
+}
+
+.ld-file-tree__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--ld-text-muted);
+  user-select: none;
+  border-radius: var(--ld-radius-sm);
+  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
+  transition: all 0.2s ease;
+  position: relative;
+  z-index: 1;
+}
+
+.ld-file-tree__label:hover {
+  background: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+}
+
+.ld-file-tree__label--folder {
+  color: var(--ld-text-main);
+  font-weight: 500;
+}
+
+.ld-file-tree__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.ld-file-tree__icon-folder {
+  color: var(--ld-color-primary);
+}
+
+.ld-file-tree__name {
+  white-space: nowrap;
+}
+
+.ld-file-tree__icon--chevron {
+  width: 14px;
+  height: 14px;
+  opacity: 0.5;
+  transition: opacity 0.2s ease;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.ld-file-tree__label:hover .ld-file-tree__icon--chevron {
+  opacity: 1;
+}
+
+.ld-file-tree__chevron {
+  transition: transform 0.2s ease;
+}
+
+.ld-file-tree__chevron--open {
+  transform: rotate(90deg);
+}
+
+.ld-file-tree__icon--spacer {
+  width: 14px;
+}

package/src/client/theme/icons/pnpm.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { SVGProps } from "react";
 
 const Pnpm = (props: SVGProps<SVGSVGElement>) => (
   <svg
@@ -54,16 +54,16 @@ const Pnpm = (props: SVGProps<SVGSVGElement>) => (
         <use xlinkHref="#pnpm_dark__dqv5133G8" fill="#f9ad00" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__b1Lv79ypvm" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__hy1IZWwLX" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__akQfjxQes" fill="#ffffff" />
       </g>
       <g>
-        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="currentColor" />
+        <use xlinkHref="#pnpm_dark__bdSrwE5pk" fill="#ffffff" />
       </g>
     </g>
   </svg>

package/src/client/theme/icons/yarn.tsx

@@ -1,16 +0,0 @@
-import type { SVGProps } from "react";
-
-const Yarn = (props: SVGProps<SVGSVGElement>) => (
-  <svg {...props} viewBox="0 0 256 256">
-    <path
-      fill="#2C8EBB"
-      d="M128 0C57.307 0 0 57.307 0 128s57.307 128 128 128 128-57.307 128-128S198.693 0 128 0zm0 234.667C69.195 234.667 21.333 186.805 21.333 128S69.195 21.333 128 21.333 234.667 69.195 234.667 128 186.805 234.667 128 234.667z"
-    />
-    <path
-      fill="#2C8EBB"
-      d="M173.045 74.053c-4.632-4.632-12.144-4.632-16.776 0L128 102.323l-28.269-28.27c-4.632-4.632-12.144-4.632-16.776 0-4.632 4.632-4.632 12.144 0 16.776L111.224 119.1l-28.269 28.269c-4.632 4.632-4.632 12.144 0 16.776 2.316 2.316 5.352 3.474 8.388 3.474s6.072-1.158 8.388-3.474L128 135.877l28.269 28.268c2.316 2.316 5.352 3.474 8.388 3.474s6.072-1.158 8.388-3.474c4.632-4.632 4.632-12.144 0-16.776L144.776 119.1l28.269-28.271 c4.632-4.632 4.632-12.144 0-16.776z"
-    />
-  </svg>
-);
-
-export { Yarn };