boltdocs 1.10.2 → 2.0.0

package/src/client/components/mdx/code-block.tsx

@@ -0,0 +1,119 @@
+import * as RAC from 'react-aria-components'
+import { Copy, Check } from 'lucide-react'
+import { cn } from '@client/utils/cn'
+import { useCodeBlock } from './hooks/use-code-block'
+import { useConfig } from '@client/app/config-context'
+import { CodeSandbox } from '@components/icons-dev'
+import { Tooltip } from '@components/primitives/tooltip'
+
+export interface CodeBlockProps {
+  children?: React.ReactNode
+  className?: string
+  sandbox?: boolean | any
+  hideCopy?: boolean
+  hideSandbox?: boolean
+  title?: string
+  lang?: string
+  highlightedHtml?: string
+  [key: string]: any
+}
+
+export function CodeBlock(props: CodeBlockProps) {
+  const {
+    children,
+    sandbox: localSandbox,
+    hideSandbox = true,
+    hideCopy = false,
+    highlightedHtml,
+    ...rest
+  } = props
+  const config = useConfig()
+  const globalSandbox = config?.integrations?.sandbox
+  const isSandboxEnabled = !!globalSandbox?.enable && !hideSandbox
+  const {
+    copied,
+    isExpanded,
+    setIsExpanded,
+    isExpandable,
+    preRef,
+    handleCopy,
+    handleSandbox,
+    shouldTruncate,
+  } = useCodeBlock(props)
+
+  return (
+    <div
+      className={cn(
+        'group relative my-6 overflow-hidden rounded-lg border border-border-subtle bg-(--color-code-bg)',
+        shouldTruncate && '[&>pre]:max-h-[250px] [&>pre]:overflow-hidden',
+      )}
+    >
+      {/* Toolbar */}
+      <div className="absolute top-3 right-4 z-50 flex items-center gap-2 transition-all duration-300 opacity-0 group-hover:opacity-100">
+        {isSandboxEnabled && (
+          <Tooltip content="Open in CodeSandbox">
+            <RAC.Button
+              onPress={handleSandbox}
+              className="grid place-items-center w-8 h-8 bg-transparent text-text-muted outline-none cursor-pointer transition-all duration-200 hover:scale-115 hover:text-sky-400 active:scale-95 [&>svg]:w-5 [&>svg]:h-5 [&>svg]:stroke-2"
+              aria-label="Open in CodeSandbox"
+            >
+              <CodeSandbox size={20} />
+            </RAC.Button>
+          </Tooltip>
+        )}
+        {!hideCopy && (
+          <Tooltip content={copied ? 'Copied!' : 'Copy code'}>
+            <RAC.Button
+              onPress={handleCopy}
+              className={cn(
+                'grid place-items-center w-8 h-8 bg-transparent outline-none cursor-pointer transition-all duration-200 hover:scale-115 active:scale-95 [&>svg]:w-5 [&>svg]:h-5 [&>svg]:stroke-2',
+                copied
+                  ? 'text-emerald-400'
+                  : 'text-text-muted hover:text-text-main',
+              )}
+              aria-label="Copy code"
+            >
+              {copied ? <Check size={20} /> : <Copy size={20} />}
+            </RAC.Button>
+          </Tooltip>
+        )}
+      </div>
+
+      {/* Code Content */}
+      {highlightedHtml ? (
+        <div
+          // @ts-ignore
+          ref={preRef}
+          className="shiki-wrapper [&>pre]:m-0! [&>pre]:rounded-none! [&>pre]:border-none! [&>pre]:bg-inherit! [&>pre>code]:grid! [&>pre>code]:p-5! [&>.shiki.shiki-themes]:bg-transparent!"
+          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        />
+      ) : (
+        <pre
+          ref={preRef}
+          className="m-0! rounded-none! border-none! bg-inherit! font-mono text-[0.8125rem] leading-[1.7]"
+          {...rest}
+        >
+          {children}
+        </pre>
+      )}
+
+      {/* Expand/Collapse */}
+      {isExpandable && (
+        <div
+          className={cn(
+            shouldTruncate
+              ? 'absolute bottom-0 inset-x-0 h-24 bg-linear-to-t from-(--color-code-bg) to-transparent flex items-end justify-center pb-4 z-10'
+              : 'relative flex justify-center py-4',
+          )}
+        >
+          <RAC.Button
+            onPress={() => setIsExpanded(!isExpanded)}
+            className="rounded-full bg-bg-surface border border-border-subtle px-5 py-2 text-[0.8125rem] font-medium text-text-main outline-none cursor-pointer transition-all hover:bg-border-subtle hover:-translate-y-px backdrop-blur-md"
+          >
+            {isExpanded ? 'Show less' : 'Expand code'}
+          </RAC.Button>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,47 @@
+import type { SandboxOptions } from '../../types'
+import { CodeBlock } from './code-block'
+import { useComponentPreview } from './hooks/use-component-preview'
+
+export interface ComponentPreviewProps {
+  code?: string
+  highlightedHtml?: string
+  children?: string
+  preview?: React.ReactNode
+  hideCode?: boolean
+  hideSandbox?: boolean
+  hideCopy?: boolean
+  sandboxOptions?: SandboxOptions
+}
+
+export function ComponentPreview(props: ComponentPreviewProps) {
+  const {
+    highlightedHtml,
+    hideCode = false,
+    hideSandbox = false,
+    hideCopy = false,
+    sandboxOptions = {},
+  } = props
+  const { initialCode, previewElement } = useComponentPreview(props)
+
+  return (
+    <div className="my-6 overflow-hidden rounded-xl border border-border-subtle">
+      <div className="flex items-center justify-center p-8 bg-bg-surface">
+        {previewElement}
+      </div>
+
+      {!hideCode && (
+        <div className="border-t border-border-subtle">
+          <CodeBlock
+            hideSandbox={hideSandbox}
+            hideCopy={hideCopy}
+            title={sandboxOptions.title}
+            lang="tsx"
+            highlightedHtml={highlightedHtml}
+          >
+            {initialCode}
+          </CodeBlock>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,83 @@
+import { cn } from '@client/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/field.tsx

@@ -0,0 +1,66 @@
+import { cn } from '@client/utils/cn'
+
+export interface FieldProps {
+  name: string
+  type?: string
+  defaultValue?: string
+  required?: boolean
+  children: React.ReactNode
+  id?: string
+  className?: string
+}
+
+export function Field({
+  name,
+  type,
+  defaultValue,
+  required = false,
+  children,
+  id,
+  className = '',
+}: FieldProps) {
+  return (
+    <article
+      className={cn(
+        'group relative my-6 rounded-xl border border-border-subtle bg-bg-surface p-5 transition-all duration-300',
+        'hover:border-primary-500/30 hover:shadow-lg hover:shadow-primary-500/5',
+        className,
+      )}
+      id={id}
+    >
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
+        <div className="flex flex-wrap items-center gap-2.5">
+          <code className="inline-flex items-center rounded-md bg-primary-500/10 px-2.5 py-1 font-mono text-sm font-bold text-primary-400 border border-primary-500/20 shadow-sm transition-colors group-hover:bg-primary-500/15">
+            {name}
+          </code>
+          {type && (
+            <span className="rounded-md bg-bg-muted/80 border border-border-subtle px-2 py-0.5 text-[11px] font-semibold text-text-muted uppercase tracking-wider shadow-sm">
+              {type}
+            </span>
+          )}
+          {required && (
+            <div className="flex items-center gap-1.5 rounded-full bg-red-500/10 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-red-400 border border-red-500/20 shadow-sm">
+              <span className="h-1 w-1 rounded-full bg-red-400 animate-pulse" />
+              Required
+            </div>
+          )}
+        </div>
+
+        {defaultValue && (
+          <div className="flex items-center gap-2 text-[11px] text-text-muted bg-bg-muted/30 px-2.5 py-1 rounded-md border border-border-subtle/50">
+            <span className="font-semibold opacity-60 uppercase tracking-tighter">
+              Default
+            </span>
+            <code className="font-mono text-text-main font-medium">
+              {defaultValue}
+            </code>
+          </div>
+        )}
+      </div>
+
+      <div className="text-sm text-text-muted leading-relaxed [&>p]:m-0 selection:bg-primary-500/30">
+        {children}
+      </div>
+    </article>
+  )
+}

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

@@ -0,0 +1,287 @@
+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 '@client/utils/cn'
+
+// --- Constants & Types ---
+
+const ICON_SIZE = 16
+const STROKE_WIDTH = 2
+
+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}
+      />
+    )
+  }
+
+  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-code-block.ts

@@ -0,0 +1,56 @@
+import { useConfig } from '@client/app/config-context'
+import { openSandbox } from '@client/integrations/codesandbox'
+import { copyToClipboard } from '@client/utils/copy-clipboard'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { CodeBlockProps } from '../code-block'
+
+export function useCodeBlock(props: CodeBlockProps) {
+  const { title, sandbox: localSandbox } = props
+  const [copied, setCopied] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isExpandable, setIsExpandable] = useState(false)
+  const preRef = useRef<HTMLPreElement>(null)
+  const config = useConfig()
+
+  const handleCopy = useCallback(async () => {
+    const code = preRef.current?.textContent ?? ''
+    copyToClipboard(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }, [])
+
+  const handleSandbox = useCallback(() => {
+    const code = preRef.current?.textContent ?? ''
+    const globalSandbox = config?.integrations?.sandbox?.config || {}
+    const baseOptions =
+      typeof localSandbox === 'object' ? localSandbox : globalSandbox
+
+    const entry = baseOptions.entry || 'src/App.tsx'
+
+    openSandbox({
+      title: title ?? 'Code Snippet',
+      ...baseOptions,
+      files: {
+        ...baseOptions.files,
+        [entry]: { content: code },
+      },
+    })
+  }, [title, config, localSandbox])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: updates when content changes
+  useEffect(() => {
+    const codeLength = preRef.current?.textContent?.length ?? 0
+    setIsExpandable(codeLength > 120)
+  }, [props.children, props.highlightedHtml])
+
+  return {
+    copied,
+    isExpanded,
+    setIsExpanded,
+    isExpandable,
+    preRef,
+    handleCopy,
+    handleSandbox,
+    shouldTruncate: isExpandable && !isExpanded,
+  }
+}

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

@@ -0,0 +1,16 @@
+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 }
+}