boltdocs 1.10.1 → 1.11.0

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

@@ -0,0 +1,124 @@
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import { useCallback, useRef } from 'react'
+import * as RAC from 'react-aria-components'
+import { cn } from '@client/utils/cn'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+const cardsVariants = cva('grid gap-4 my-6', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 sm:grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    },
+  },
+  defaultVariants: {
+    cols: 3,
+  },
+})
+type CardsVariants = VariantProps<typeof cardsVariants>
+
+export interface CardsProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    CardsVariants {}
+
+export function Cards({
+  cols = 3,
+  children,
+  className = '',
+  ...rest
+}: CardsProps) {
+  return (
+    <div className={cn(cardsVariants({ cols }), className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  icon?: React.ReactNode
+  href?: string
+  children?: React.ReactNode
+}
+
+export function Card({
+  title,
+  icon,
+  href,
+  children,
+  className = '',
+  ...rest
+}: CardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const linkRef = useRef<HTMLAnchorElement>(null)
+
+  const handleMouseMove = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
+    const el = cardRef.current || linkRef.current
+    if (!el) return
+    const { left, top } = el.getBoundingClientRect()
+    el.style.setProperty('--x', `${e.clientX - left}px`)
+    el.style.setProperty('--y', `${e.clientY - top}px`)
+  }, [])
+
+  const inner = (
+    <>
+      <div
+        className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{
+          background:
+            'radial-gradient(400px circle at var(--x) var(--y), color-mix(in oklch, var(--color-primary-500), transparent 90%), transparent 80%)',
+        }}
+      />
+      {icon && (
+        <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/10 text-primary-400 text-lg transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3">
+          {icon}
+        </div>
+      )}
+      <div className="space-y-1.5">
+        {title && <h3 className="text-sm font-bold text-text-main">{title}</h3>}
+        {children && (
+          <div className="text-sm text-text-muted leading-relaxed">
+            {children}
+          </div>
+        )}
+      </div>
+    </>
+  )
+
+  const cardClasses = cn(
+    'group relative block rounded-xl border border-border-subtle bg-bg-surface p-5 outline-none overflow-hidden',
+    'transition-all duration-200 hover:border-primary-500/40 hover:shadow-lg hover:shadow-primary-500/5',
+    'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+    className,
+  )
+
+  if (href) {
+    return (
+      <RAC.Link
+        ref={linkRef}
+        href={href}
+        className={cn(cardClasses, 'no-underline cursor-pointer')}
+        onMouseMove={handleMouseMove}
+        {...(rest as any)}
+      >
+        {inner}
+      </RAC.Link>
+    )
+  }
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: spotlight effect is decorative
+    <div
+      ref={cardRef}
+      role="presentation"
+      className={cardClasses}
+      onMouseMove={handleMouseMove}
+      {...rest}
+    >
+      {inner}
+    </div>
+  )
+}

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>
+  )
+}