boltdocs 2.6.2 → 2.7.0

package/src/client/components/mdx/component-props.tsx

@@ -1,83 +0,0 @@
-import { cn } from '../../utils/cn'
-
-export interface PropItem {
-  name: string
-  type: string
-  defaultValue?: string
-  required?: boolean
-  description: React.ReactNode
-}
-
-export interface ComponentPropsProps {
-  title?: string
-  props: PropItem[]
-  className?: string
-}
-
-export function ComponentProps({
-  title,
-  props,
-  className = '',
-}: ComponentPropsProps) {
-  return (
-    <div className={cn('my-6', className)}>
-      {title && (
-        <h3 className="text-base font-bold text-text-main mb-3">{title}</h3>
-      )}
-      <div className="overflow-x-auto rounded-lg border border-border-subtle">
-        <table className="w-full border-collapse text-sm">
-          <thead>
-            <tr>
-              <th className="text-left px-4 py-3 border-b-2 border-border-subtle text-xs font-bold uppercase tracking-wider text-text-muted">
-                Property
-              </th>
-              <th className="text-left px-4 py-3 border-b-2 border-border-subtle text-xs font-bold uppercase tracking-wider text-text-muted">
-                Type
-              </th>
-              <th className="text-left px-4 py-3 border-b-2 border-border-subtle text-xs font-bold uppercase tracking-wider text-text-muted">
-                Default
-              </th>
-              <th className="text-left px-4 py-3 border-b-2 border-border-subtle text-xs font-bold uppercase tracking-wider text-text-muted">
-                Description
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {props.map((prop, index) => (
-              <tr
-                key={`${prop.name}-${index}`}
-                className="transition-colors hover:bg-bg-surface"
-              >
-                <td className="px-4 py-2.5 border-b border-border-subtle">
-                  <code className="rounded bg-bg-surface px-1.5 py-0.5 font-mono text-xs font-bold text-primary-400">
-                    {prop.name}
-                  </code>
-                  {prop.required && (
-                    <span className="ml-1 text-red-400 font-bold">*</span>
-                  )}
-                </td>
-                <td className="px-4 py-2.5 border-b border-border-subtle">
-                  <code className="rounded bg-bg-muted px-1.5 py-0.5 font-mono text-xs text-text-muted">
-                    {prop.type}
-                  </code>
-                </td>
-                <td className="px-4 py-2.5 border-b border-border-subtle">
-                  {prop.defaultValue ? (
-                    <code className="rounded bg-bg-muted px-1.5 py-0.5 font-mono text-xs text-primary-400">
-                      {prop.defaultValue}
-                    </code>
-                  ) : (
-                    <span className="text-text-dim">—</span>
-                  )}
-                </td>
-                <td className="px-4 py-2.5 border-b border-border-subtle text-text-muted">
-                  {prop.description}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  )
-}

package/src/client/components/mdx/file-tree.tsx

@@ -1,325 +0,0 @@
-import { Children, isValidElement, useMemo } from 'react'
-import * as RAC from 'react-aria-components'
-import {
-  Folder,
-  FileText,
-  File,
-  FileCode,
-  FileImage,
-  ChevronRight,
-} from 'lucide-react'
-import { cn } from '../../utils/cn'
-
-import {
-  TypeScript,
-  JavaScript,
-  React as ReactIcon,
-  Json,
-  Css,
-  BracketsOrange,
-  Markdown,
-  Shell,
-  Yaml,
-} from '../icons-dev'
-
-// --- Constants & Types ---
-
-const ICON_SIZE = 16
-const STROKE_WIDTH = 2
-
-const FILE_EXTENSION_MAP: Record<
-  string,
-  React.ComponentType<{ size?: number }>
-> = {
-  ts: TypeScript,
-  tsx: ReactIcon,
-  js: JavaScript,
-  jsx: ReactIcon,
-  json: Json,
-  css: Css,
-  html: BracketsOrange,
-  md: Markdown,
-  mdx: Markdown,
-  bash: Shell,
-  sh: Shell,
-  yaml: Yaml,
-  yml: Yaml,
-}
-
-const FILE_REGEXES = {
-  CODE: /\.(ts|tsx|js|jsx|json|mjs|cjs|astro|vue|svelte)$/i,
-  TEXT: /\.(md|mdx|txt)$/i,
-  IMAGE: /\.(png|jpg|jpeg|svg|gif)$/i,
-} as const
-
-export interface FileTreeProps {
-  children: React.ReactNode
-}
-
-interface TreeItemData {
-  id: string
-  name: string
-  comment?: string
-  isFolder: boolean
-  children?: TreeItemData[]
-}
-
-// --- Helpers ---
-
-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) &&
-    node.props &&
-    typeof node.props === 'object' &&
-    'children' in node.props
-  ) {
-    return getTextContent(
-      (node.props as { children?: React.ReactNode }).children,
-    )
-  }
-  return ''
-}
-
-function getFileIcon(filename: string, isFolder: boolean) {
-  const name = filename.toLowerCase()
-  const iconClass = 'shrink-0 transition-colors duration-200'
-
-  if (isFolder) {
-    return (
-      <Folder
-        size={ICON_SIZE}
-        strokeWidth={STROKE_WIDTH}
-        className={cn(iconClass, 'text-primary-400')}
-        fill="currentColor"
-        fillOpacity={0.15}
-      />
-    )
-  }
-
-  // Check for specialized language icons
-  const extension = name.split('.').pop() || ''
-  const LangIcon = FILE_EXTENSION_MAP[extension]
-  if (LangIcon) {
-    return <LangIcon size={ICON_SIZE} />
-  }
-
-  const fileIconClass = cn(
-    iconClass,
-    'text-text-dim group-hover:text-text-main',
-  )
-
-  if (FILE_REGEXES.CODE.test(name))
-    return (
-      <FileCode
-        size={ICON_SIZE}
-        strokeWidth={STROKE_WIDTH}
-        className={fileIconClass}
-      />
-    )
-  if (FILE_REGEXES.TEXT.test(name))
-    return (
-      <FileText
-        size={ICON_SIZE}
-        strokeWidth={STROKE_WIDTH}
-        className={fileIconClass}
-      />
-    )
-  if (FILE_REGEXES.IMAGE.test(name))
-    return (
-      <FileImage
-        size={ICON_SIZE}
-        strokeWidth={STROKE_WIDTH}
-        className={fileIconClass}
-      />
-    )
-
-  return (
-    <File
-      size={ICON_SIZE}
-      strokeWidth={STROKE_WIDTH}
-      className={fileIconClass}
-    />
-  )
-}
-
-function isListElement(
-  node: unknown,
-  tag: 'ul' | 'li',
-): node is React.ReactElement<{ children?: React.ReactNode }> {
-  if (!isValidElement(node)) return false
-
-  const type = node.type
-  if (typeof type === 'string') return type === tag
-  if (typeof type === 'function') {
-    return type.name === tag || type.name?.toLowerCase() === tag
-  }
-
-  const props = node.props as any
-  return props?.originalType === tag || props?.mdxType === tag
-}
-
-function parseLabel(rawLabel: string): { name: string; comment?: string } {
-  const commentMatch = rawLabel.match(/\s+(\/\/|#)\s+(.*)$/)
-  if (commentMatch) {
-    return {
-      name: rawLabel.slice(0, commentMatch.index).trim(),
-      comment: commentMatch[2],
-    }
-  }
-  return { name: rawLabel.trim() }
-}
-
-function parseMdxToData(
-  node: React.ReactNode,
-  path: string = 'root',
-): TreeItemData[] {
-  if (!isValidElement(node)) return []
-
-  const items: TreeItemData[] = []
-
-  if (isListElement(node, 'ul')) {
-    Children.forEach(
-      (node.props as { children?: React.ReactNode }).children,
-      (child, index) => {
-        items.push(...parseMdxToData(child, `${path}-${index}`))
-      },
-    )
-    return items
-  }
-
-  if (isListElement(node, 'li')) {
-    const children = Children.toArray(
-      (node.props as { children?: React.ReactNode }).children,
-    )
-    const nestedListIndex = children.findIndex((child) =>
-      isListElement(child, 'ul'),
-    )
-
-    const hasNested = nestedListIndex !== -1
-    const labelNodes = hasNested ? children.slice(0, nestedListIndex) : children
-    const nestedNodes = hasNested ? children.slice(nestedListIndex) : []
-
-    const rawLabelContent = getTextContent(labelNodes)
-    const { name, comment } = parseLabel(rawLabelContent)
-
-    const isExplicitDir = name.endsWith('/')
-    const labelText = isExplicitDir ? name.slice(0, -1) : name
-    const isFolder = hasNested || isExplicitDir
-
-    items.push({
-      id: `${path}-${labelText}`,
-      name: labelText,
-      comment,
-      isFolder,
-      children: hasNested
-        ? parseMdxToData(nestedNodes[0], `${path}-${labelText}`)
-        : undefined,
-    })
-    return items
-  }
-
-  if (
-    node.props &&
-    typeof node.props === 'object' &&
-    'children' in node.props
-  ) {
-    Children.forEach(
-      (node.props as { children?: React.ReactNode }).children,
-      (child, index) => {
-        items.push(...parseMdxToData(child, `${path}-${index}`))
-      },
-    )
-  }
-
-  return items
-}
-
-// --- Sub-Components ---
-
-function FileTreeNode({ item }: { item: TreeItemData }) {
-  return (
-    <RAC.TreeItem
-      id={item.id}
-      textValue={item.name}
-      className="outline-none group focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-md"
-    >
-      <RAC.TreeItemContent>
-        {({ isExpanded, hasChildItems }) => (
-          <div className="flex items-center gap-2 py-1 px-1.5 rounded-md transition-colors hover:bg-primary-500/5 cursor-pointer">
-            <div
-              style={{ width: `calc((var(--tree-item-level) - 1) * 1rem)` }}
-              className="shrink-0"
-            />
-            {hasChildItems ? (
-              <RAC.Button
-                slot="chevron"
-                className="outline-none text-text-dim hover:text-primary-400 p-0.5 rounded transition-colors"
-              >
-                <ChevronRight
-                  size={14}
-                  strokeWidth={3}
-                  className={cn(
-                    'transition-transform duration-200',
-                    isExpanded && 'rotate-90',
-                  )}
-                />
-              </RAC.Button>
-            ) : (
-              <div className="w-[18px]" />
-            )}
-
-            {getFileIcon(item.name, item.isFolder)}
-
-            <span
-              className={cn(
-                'text-sm transition-colors truncate select-none',
-                item.isFolder
-                  ? 'font-semibold text-text-main'
-                  : 'text-text-muted group-hover:text-text-main',
-              )}
-            >
-              {item.name}
-            </span>
-
-            {item.comment && (
-              <span className="ml-2 text-xs italic text-text-dim opacity-70 group-hover:opacity-100 transition-opacity whitespace-nowrap overflow-hidden text-ellipsis font-sans">
-                {'//'} {item.comment}
-              </span>
-            )}
-          </div>
-        )}
-      </RAC.TreeItemContent>
-
-      {item.children && (
-        <RAC.Collection items={item.children}>
-          {(child) => <FileTreeNode item={child} />}
-        </RAC.Collection>
-      )}
-    </RAC.TreeItem>
-  )
-}
-
-// --- Main Component ---
-
-export function FileTree({ children }: FileTreeProps) {
-  const items = useMemo(() => parseMdxToData(children), [children])
-
-  return (
-    <div className="my-8">
-      <RAC.Tree
-        items={items}
-        aria-label="File Tree"
-        className={cn(
-          'rounded-xl border border-border-subtle bg-bg-surface/50 p-4 font-mono text-sm shadow-sm backdrop-blur-sm outline-none',
-          'max-h-[500px] overflow-y-auto scrollbar-thin scrollbar-thumb-border-subtle',
-          'focus-visible:ring-2 focus-visible:ring-primary-500/20',
-        )}
-      >
-        {(item) => <FileTreeNode item={item} />}
-      </RAC.Tree>
-    </div>
-  )
-}

package/src/client/components/mdx/hooks/use-component-preview.ts

@@ -1,16 +0,0 @@
-import { useMemo } from 'react'
-import type { ComponentPreviewProps } from '../component-preview'
-
-export function useComponentPreview(props: ComponentPreviewProps) {
-  const { code: propsCode, children, preview } = props
-  const initialCode = useMemo(() => {
-    const base = propsCode ?? (typeof children === 'string' ? children : '')
-    return base.trim()
-  }, [propsCode, children])
-
-  const previewElement = useMemo(() => {
-    return preview ?? (typeof children !== 'string' ? children : null)
-  }, [preview, children])
-
-  return { initialCode, previewElement }
-}

package/src/client/components/mdx/hooks/useTable.ts

@@ -1,74 +0,0 @@
-import { useState, useMemo } from 'react'
-
-interface SortConfig {
-  key: number
-  direction: 'asc' | 'desc'
-}
-
-interface UseTableProps {
-  data?: (string | React.ReactNode)[][]
-  sortable?: boolean
-  paginated?: boolean
-  pageSize?: number
-}
-
-export function useTable({
-  data,
-  sortable = false,
-  paginated = false,
-  pageSize = 10,
-}: UseTableProps) {
-  const [sortConfig, setSortConfig] = useState<SortConfig | null>(null)
-  const [currentPage, setCurrentPage] = useState(1)
-
-  const processedData = useMemo(() => {
-    if (!data) return []
-    const items = [...data]
-
-    if (sortable && sortConfig !== null) {
-      items.sort((a, b) => {
-        const aVal = a[sortConfig.key]
-        const bVal = b[sortConfig.key]
-
-        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 })
-  }
-
-  return {
-    sortConfig,
-    currentPage,
-    setCurrentPage,
-    totalPages,
-    paginatedData,
-    requestSort,
-  }
-}

package/src/client/components/mdx/hooks/useTabs.ts

@@ -1,68 +0,0 @@
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  type ReactElement,
-  type KeyboardEvent,
-} from 'react'
-
-interface UseTabsProps {
-  initialIndex?: number
-  tabs: ReactElement<any>[]
-}
-
-export function useTabs({ initialIndex = 0, tabs }: UseTabsProps) {
-  const defaultActive = tabs[initialIndex]?.props.disabled
-    ? tabs.findIndex((t) => !t.props.disabled)
-    : initialIndex
-
-  const [active, setActive] = useState(defaultActive === -1 ? 0 : defaultActive)
-  const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
-  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
-    opacity: 0,
-    transform: 'translateX(0)',
-    width: 0,
-  })
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: updates when content changes
-  useEffect(() => {
-    const activeTab = tabRefs.current[active]
-    if (activeTab) {
-      setIndicatorStyle({
-        opacity: 1,
-        width: activeTab.offsetWidth,
-        transform: `translateX(${activeTab.offsetLeft}px)`,
-      })
-    }
-  }, [active, tabs])
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      let direction = 0
-      if (e.key === 'ArrowRight') direction = 1
-      else if (e.key === 'ArrowLeft') direction = -1
-
-      if (direction !== 0) {
-        let nextIndex = (active + direction + tabs.length) % tabs.length
-        while (tabs[nextIndex].props.disabled && nextIndex !== active) {
-          nextIndex = (nextIndex + direction + tabs.length) % tabs.length
-        }
-
-        if (nextIndex !== active && !tabs[nextIndex].props.disabled) {
-          setActive(nextIndex)
-          tabRefs.current[nextIndex]?.focus()
-        }
-      }
-    },
-    [active, tabs],
-  )
-
-  return {
-    active,
-    setActive,
-    tabRefs,
-    indicatorStyle,
-    handleKeyDown,
-  }
-}

package/src/client/components/mdx/link.tsx

@@ -1,38 +0,0 @@
-import {
-  Link as LinkPrimitive,
-  type LinkProps as LinkPrimitiveProps,
-} from '../primitives/link'
-import { cn } from '../../utils/cn'
-
-export type LinkProps = LinkPrimitiveProps & {
-  to: string
-  children?: React.ReactNode
-}
-
-/**
- * A premium Link component for Boltdocs that handles internal and external routing.
- */
-export function Link({ to, children, className = '', ...props }: LinkProps) {
-  const isExternal =
-    to &&
-    (to.startsWith('http://') ||
-      to.startsWith('https://') ||
-      to.startsWith('//'))
-
-  const combinedClassName = cn(
-    'text-blue-600 hover:text-blue-800 hover:underline cursor-pointer',
-    className,
-  )
-
-  return (
-    <LinkPrimitive
-      href={to}
-      className={combinedClassName}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}
-      {...props}
-    >
-      {children}
-    </LinkPrimitive>
-  )
-}