boltdocs 1.10.2 → 1.11.0

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

@@ -1,229 +0,0 @@
-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/List.tsx

@@ -1,57 +0,0 @@
-import React, { Children } from "react";
-import { Check, ChevronRight } from "lucide-react";
-
-export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
-  /** Visual variant */
-  variant?: "checked" | "arrow" | "default";
-  children: React.ReactNode;
-}
-
-const ICON_MAP: Record<string, React.ReactNode> = {
-  checked: <Check size={14} className="ld-list__icon" />,
-  arrow: <ChevronRight size={14} className="ld-list__icon" />,
-};
-
-/**
- * Enhanced list component with icon variants.
- *
- * ```mdx
- * <List variant="checked">
- *   <li>File-system routing</li>
- *   <li>MDX support</li>
- *   <li>Syntax highlighting</li>
- * </List>
- * ```
- */
-export function List({
-  variant = "default",
-  children,
-  className = "",
-  ...rest
-}: ListProps) {
-  if (variant === "default") {
-    return (
-      <ul className={`ld-list ${className}`.trim()} {...rest}>
-        {children}
-      </ul>
-    );
-  }
-
-  const icon = ICON_MAP[variant];
-
-  return (
-    <ul className={`ld-list ld-list--${variant} ${className}`.trim()} {...rest}>
-      {Children.map(children, (child) => {
-        if (!React.isValidElement(child)) return child;
-        return (
-          <li className="ld-list__item">
-            {icon}
-            <span className="ld-list__text">
-              {(child as React.ReactElement<any>).props.children}
-            </span>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}

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

@@ -1,151 +0,0 @@
-import React, { useState, useMemo } from "react";
-import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
-
-export interface TableProps {
-  headers?: string[];
-  data?: (string | React.ReactNode)[][];
-  children?: React.ReactNode;
-  className?: string;
-  sortable?: boolean;
-  paginated?: boolean;
-  pageSize?: number;
-}
-
-export function Table({
-  headers,
-  data,
-  children,
-  className = "",
-  sortable = false,
-  paginated = false,
-  pageSize = 10,
-}: TableProps) {
-  const [sortConfig, setSortConfig] = useState<{ key: number; direction: 'asc' | 'desc' } | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const processedData = useMemo(() => {
-    if (!data) return [];
-    let items = [...data];
-
-    if (sortable && sortConfig !== null) {
-      items.sort((a, b) => {
-        const aVal = a[sortConfig.key];
-        const bVal = b[sortConfig.key];
-        
-        // Simple string comparison for sorting
-        const aStr = typeof aVal === 'string' ? aVal : '';
-        const bStr = typeof bVal === 'string' ? bVal : '';
-
-        if (aStr < bStr) return sortConfig.direction === 'asc' ? -1 : 1;
-        if (aStr > bStr) return sortConfig.direction === 'asc' ? 1 : -1;
-        return 0;
-      });
-    }
-
-    return items;
-  }, [data, sortConfig, sortable]);
-
-  const totalPages = Math.ceil(processedData.length / pageSize);
-  const paginatedData = useMemo(() => {
-    if (!paginated) return processedData;
-    const start = (currentPage - 1) * pageSize;
-    return processedData.slice(start, start + pageSize);
-  }, [processedData, paginated, currentPage, pageSize]);
-
-  const requestSort = (index: number) => {
-    if (!sortable) return;
-    let direction: 'asc' | 'desc' = 'asc';
-    if (sortConfig && sortConfig.key === index && sortConfig.direction === 'asc') {
-      direction = 'desc';
-    }
-    setSortConfig({ key: index, direction });
-  };
-
-  const renderSortIcon = (index: number) => {
-    if (!sortable) return null;
-    if (sortConfig?.key !== index) return <ChevronDown size={14} className="ld-table-sort-icon ld-table-sort-icon--hidden" />;
-    return sortConfig.direction === 'asc' ? <ChevronUp size={14} className="ld-table-sort-icon" /> : <ChevronDown size={14} className="ld-table-sort-icon" />;
-  };
-
-  const tableContent = children ? (
-    children
-  ) : (
-    <>
-      {headers && (
-        <thead>
-          <tr>
-            {headers.map((header, i) => (
-              <th 
-                key={i} 
-                onClick={() => requestSort(i)}
-                className={sortable ? "ld-table-header--sortable" : ""}
-              >
-                <div className="ld-table-header-content">
-                  {header}
-                  {renderSortIcon(i)}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-      )}
-      {paginatedData && (
-        <tbody>
-          {paginatedData.map((row, i) => (
-            <tr key={i}>
-              {row.map((cell, j) => (
-                <td key={j}>{cell}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      )}
-    </>
-  );
-
-  return (
-    <div className={`ld-table-container ${className}`.trim()}>
-      <div className="ld-table-wrapper">
-        <table className="ld-table">{tableContent}</table>
-      </div>
-      
-      {paginated && totalPages > 1 && (
-        <div className="ld-table-pagination">
-          <div className="ld-table-pagination-info">
-            Page {currentPage} of {totalPages}
-          </div>
-          <div className="ld-table-pagination-controls">
-            <button 
-              onClick={() => setCurrentPage(1)} 
-              disabled={currentPage === 1}
-              className="ld-table-pagination-btn"
-            >
-              <ChevronsLeft size={16} />
-            </button>
-            <button 
-              onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))} 
-              disabled={currentPage === 1}
-              className="ld-table-pagination-btn"
-            >
-              <ChevronLeft size={16} />
-            </button>
-            <button 
-              onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))} 
-              disabled={currentPage === totalPages}
-              className="ld-table-pagination-btn"
-            >
-              <ChevronRight size={16} />
-            </button>
-            <button 
-              onClick={() => setCurrentPage(totalPages)} 
-              disabled={currentPage === totalPages}
-              className="ld-table-pagination-btn"
-            >
-              <ChevronsRight size={16} />
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,123 +0,0 @@
-import React, { useState, Children, isValidElement, useRef } from "react";
-import { CodeBlock } from "../CodeBlock";
-import { NPM } from "../../icons/npm";
-import { Pnpm } from "../../icons/pnpm";
-import { Bun } from "../../icons/bun";
-import { Deno } from "../../icons/deno";
-
-/* ─── Tab (individual panel) ──────────────────────────────── */
-export interface TabProps {
-  /** The label shown in the tab bar */
-  label: string;
-  children: React.ReactNode;
-}
-
-/**
- * A single tab panel. Must be used inside `<Tabs>`.
- *
- * ```mdx
- * <Tab label="npm">npm install boltdocs</Tab>
- * ```
- */
-export function Tab({ children }: TabProps) {
-  // If children is a simple string, wrap it in a CodeBlock for syntax highlighting
-  const content =
-    typeof children === "string" ? (
-      <CodeBlock className="language-bash">
-        <code>{children.trim()}</code>
-      </CodeBlock>
-    ) : (
-      children
-    );
-
-  return <div className="ld-tab-panel">{content}</div>;
-}
-
-/* ─── Tabs (container) ────────────────────────────────────── */
-export interface TabsProps {
-  /** Which tab index is initially active (0-based, default 0) */
-  defaultIndex?: number;
-  children: React.ReactNode;
-}
-
-const getIconForLabel = (label: string) => {
-  const l = label.toLowerCase();
-  if (l.includes("pnpm")) return <Pnpm />;
-  if (l.includes("npm")) return <NPM />;
-  if (l.includes("bun")) return <Bun />;
-  if (l.includes("deno")) return <Deno />;
-  return null;
-};
-
-/**
- * Tab container that manages active state.
- *
- * ```mdx
- * <Tabs>
- *   <Tab label="npm">npm install boltdocs</Tab>
- *   <Tab label="pnpm">pnpm add boltdocs</Tab>
- * </Tabs>
- * ```
- */
-export function Tabs({ defaultIndex = 0, children }: TabsProps) {
-  const [active, setActive] = useState(defaultIndex);
-  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
-
-  // Extract Tab children
-  const tabs = Children.toArray(children).filter(
-    (child) => isValidElement(child) && (child as any).props?.label,
-  );
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    let newIndex = active;
-    if (e.key === "ArrowRight") {
-      newIndex = (active + 1) % tabs.length;
-    } else if (e.key === "ArrowLeft") {
-      newIndex = (active - 1 + tabs.length) % tabs.length;
-    }
-
-    if (newIndex !== active) {
-      setActive(newIndex);
-      tabRefs.current[newIndex]?.focus();
-    }
-  };
-
-  return (
-    <div className="ld-tabs">
-      <div className="ld-tabs__bar" role="tablist" onKeyDown={handleKeyDown}>
-        {tabs.map((child, i) => {
-          const label = (child as React.ReactElement<TabProps>).props.label;
-          const Icon = getIconForLabel(label);
-          return (
-            <button
-              key={i}
-              role="tab"
-              aria-selected={i === active}
-              aria-controls={`tabpanel-${i}`}
-              id={`tab-${i}`}
-              tabIndex={i === active ? 0 : -1}
-              ref={(el) => {
-                tabRefs.current[i] = el;
-              }}
-              className={`ld-tabs__trigger ${
-                i === active ? "ld-tabs__trigger--active" : ""
-              }`}
-              onClick={() => setActive(i)}
-            >
-              {Icon}
-              <span>{label}</span>
-            </button>
-          );
-        })}
-      </div>
-      <div
-        className="ld-tabs__content"
-        role="tabpanel"
-        id={`tabpanel-${active}`}
-        aria-labelledby={`tab-${active}`}
-      >
-        {tabs[active]}
-      </div>
-    </div>
-  );
-}

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

@@ -1,27 +0,0 @@
-// MDX UI Components — barrel export
-export { Button } from "./Button";
-export type { ButtonProps } from "./Button";
-
-export { Badge } from "./Badge";
-export type { BadgeProps } from "./Badge";
-
-export { Card, Cards } from "./Card";
-export type { CardProps, CardsProps } from "./Card";
-
-export { Tabs, Tab } from "./Tabs";
-export type { TabsProps, TabProps } from "./Tabs";
-
-export { Admonition, Note, Tip, Warning, Danger, InfoBox } from "./Admonition";
-export type { AdmonitionProps } from "./Admonition";
-
-export { List } from "./List";
-export type { ListProps } from "./List";
-
-export { FileTree } from "./FileTree";
-export type { FileTreeProps } from "./FileTree";
-
-export { Table } from "./Table";
-export type { TableProps } from "./Table";
-
-export { Field } from "./Field";
-export type { FieldProps } from "./Field";