jamdesk 1.0.0

package/vendored/components/mdx/MDXComponents.tsx

@@ -0,0 +1,414 @@
+import { isValidElement, type ReactNode } from 'react';
+import { Card } from './Card';
+import { Note, Info, Warning, Tip, Check, Danger, Callout } from './Callouts';
+import { Accordion, AccordionGroup } from './Accordion';
+import { CodeGroup } from './CodeGroup';
+import { Steps, Step } from './Steps';
+import { ParamField } from './ParamField';
+import { ResponseField } from './ResponseField';
+import { RequestExample } from './RequestExample';
+import { ResponseExample } from './ResponseExample';
+import { ApiEndpoint, HttpMethodBadge } from './ApiEndpoint';
+import { ApiCodePanel, ApiPageLayout } from './ApiCodePanel';
+import { OpenApiEndpoint } from './OpenApiEndpoint';
+import { ZoomableImage } from './ZoomableImage';
+import { Icon } from './Icon';
+import { Expandable } from './Expandable';
+import { Frame } from './Frame';
+import { Update } from './Update';
+import { Tabs, Tab } from './Tabs';
+import { Table, Row, Cell } from './Table';
+import { CodePanel } from '../ui/CodePanel';
+import { Latex } from './Latex';
+import { Tooltip } from './Tooltip';
+import { Mermaid } from './Mermaid';
+import { Badge } from './Badge';
+import { Color, ColorItem, ColorRow } from './Color';
+import { Panel } from './Panel';
+import { Tile } from './Tile';
+import { Tree, TreeFolder, TreeFile } from './Tree';
+import { Columns } from './Columns';
+import { View, ViewProvider, ViewSelector, ViewWrapper } from './View';
+import { YouTube } from './YouTube';
+
+/**
+ * Extract language from a pre element for tab label
+ *
+ * Priority order:
+ * 1. data-language attribute on pre (set by Shiki transformer)
+ * 2. language-* class on code element (standard markdown)
+ * 3. language-* class on pre element (fallback for edge cases)
+ */
+function getCodeLanguage(preProps: any, children: ReactNode): string {
+  // Check data-language on pre element (added by Shiki transformer)
+  if (preProps['data-language']) {
+    return preProps['data-language'];
+  }
+  // Check code element's className for language-* class
+  if (isValidElement(children)) {
+    const codeProps = children.props as any;
+    const className = codeProps?.className || '';
+    const match = className.match(/language-(\w+)/);
+    if (match) return match[1];
+  }
+  // Fallback: check pre element className (defensive for edge cases)
+  const preClassName = preProps?.className || '';
+  const preMatch = preClassName.match(/language-(\w+)/);
+  if (preMatch) return preMatch[1];
+
+  return 'Code';
+}
+
+/**
+ * Extract text content from React children (handles Shiki-rendered code)
+ */
+function extractTextFromChildren(children: ReactNode): string {
+  if (typeof children === 'string') return children;
+  if (typeof children === 'number') return String(children);
+  if (!children) return '';
+
+  if (isValidElement(children)) {
+    const props = children.props as any;
+    return extractTextFromChildren(props?.children);
+  }
+
+  if (Array.isArray(children)) {
+    return children.map(extractTextFromChildren).join('');
+  }
+
+  return '';
+}
+
+/**
+ * Parse HTTP request from code block text
+ * Supports: "GET https://api.example.com/path" or "POST /api/endpoint"
+ */
+function parseHttpRequest(text: string): { method: string; url: string } | null {
+  const trimmed = text.trim();
+  // Match: METHOD URL (e.g., "GET https://api.example.com/users/:id")
+  const match = trimmed.match(/^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS|TRACE)\s+(.+)$/i);
+  if (match) {
+    return {
+      method: match[1].toUpperCase(),
+      url: match[2].trim(),
+    };
+  }
+  return null;
+}
+
+/**
+ * HTTP method colors for badges
+ */
+const httpMethodColors: Record<string, { bg: string; text: string }> = {
+  GET: { bg: 'bg-emerald-500/10', text: 'text-emerald-500' },
+  POST: { bg: 'bg-blue-500/10', text: 'text-blue-500' },
+  PUT: { bg: 'bg-amber-500/10', text: 'text-amber-500' },
+  PATCH: { bg: 'bg-orange-500/10', text: 'text-orange-500' },
+  DELETE: { bg: 'bg-red-500/10', text: 'text-red-500' },
+  HEAD: { bg: 'bg-purple-500/10', text: 'text-purple-500' },
+  OPTIONS: { bg: 'bg-gray-500/10', text: 'text-gray-500' },
+  TRACE: { bg: 'bg-gray-500/10', text: 'text-gray-500' },
+};
+
+/**
+ * HTTP Code Block Component (Server-renderable)
+ * Renders HTTP requests with a bordered card, method badge, and URL
+ * Uses data attributes for client-side copy functionality
+ */
+function HttpCodeBlock({ method, url }: { method: string; url: string }) {
+  const colors = httpMethodColors[method] || httpMethodColors.GET;
+  const fullText = `${method} ${url}`;
+
+  return (
+    <div
+      className="flex items-center gap-3 px-4 py-3 rounded-lg border border-[var(--color-border)] bg-white my-4 not-prose http-code-block"
+      data-copy-text={fullText}
+    >
+      {/* Method badge */}
+      <span className={`px-2 py-0.5 text-xs font-bold rounded ${colors.bg} ${colors.text}`}>
+        {method}
+      </span>
+      {/* URL in monospace */}
+      <span
+        className="text-sm text-[var(--color-text-primary)] flex-1 overflow-x-auto whitespace-nowrap"
+        style={{ fontFamily: 'var(--font-mono, ui-monospace, monospace)' }}
+      >
+        {url}
+      </span>
+      {/* Copy button - functionality added via client-side script */}
+      <button
+        className="http-copy-btn p-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-md transition-colors flex-shrink-0"
+        title="Copy"
+        type="button"
+      >
+        <i className="fa-regular fa-copy text-sm" aria-hidden="true" />
+      </button>
+    </div>
+  );
+}
+
+export const MDXComponents = {
+  Card,
+  // Callout components
+  Note,
+  Info,
+  Warning,
+  Tip,
+  Check,
+  Danger,
+  Callout,
+  // Accordion components
+  Accordion,
+  AccordionGroup,
+  CodeGroup,
+  Steps,
+  Step,
+  ParamField,
+  ResponseField,
+  RequestExample,
+  ResponseExample,
+  ApiEndpoint,
+  HttpMethodBadge,
+  ApiCodePanel,
+  ApiPageLayout,
+  // OpenAPI endpoint renderer
+  OpenApiEndpoint,
+  // Icon component for inline icons
+  Icon,
+  // Expandable/collapsible section
+  Expandable,
+  // Frame for images/content
+  Frame,
+  // Update for changelog entries
+  Update,
+  // Tabs for organizing content
+  Tabs,
+  Tab,
+  // Table components for structured data
+  Table,
+  Row,
+  Cell,
+  // LaTeX math rendering
+  Latex,
+  // Tooltip for contextual definitions
+  Tooltip,
+  // Mermaid diagrams
+  Mermaid,
+  // Badge component for labels and status indicators
+  Badge,
+  // Color palette display (supports Color.Item syntax via recma-compound-components)
+  Color,
+  ColorItem,
+  ColorRow,
+  // Panel component for custom sidebar content (replaces Table of Contents)
+  Panel,
+  // Tile component for visual preview cards with pattern backgrounds
+  Tile,
+  // Tree file/folder hierarchy (supports Tree.Folder syntax via recma-compound-components)
+  Tree,
+  TreeFolder,
+  TreeFile,
+  // Columns layout component for responsive grids
+  Columns,
+  // View components for multi-view content (language/framework-specific docs)
+  View,
+  ViewProvider,
+  ViewSelector,
+  ViewWrapper,
+  // Media embeds
+  YouTube,
+  // Localized component aliases (for translated docs)
+  Varning: Warning,        // Swedish
+  Avertissement: Warning,  // French
+  img: ({
+    src,
+    alt,
+    width,
+    height,
+    style,
+    loading,
+    decoding,
+    className,
+    class: htmlClass,
+    'data-no-zoom': dataNoZoom,
+    'data-no-style': dataNoStyle,
+    noZoom,  // Explicitly destructure to prevent React warning about unknown DOM prop
+    nozoom,  // Also handle lowercase version from HTML parsing
+    noStyle, // Explicitly destructure to prevent React warning about unknown DOM prop
+    nostyle, // Also handle lowercase version from HTML parsing
+    // Destructure and ignore any other props to prevent them from being passed to DOM
+    ...rest
+  }: any) => {
+    // Check for data-no-zoom attribute or noZoom prop (handle both camelCase and lowercase)
+    const disableZoom = dataNoZoom === 'true' || dataNoZoom === true ||
+                        noZoom === true || noZoom === 'true' ||
+                        nozoom === true || nozoom === 'true';
+
+    // Check for data-no-style attribute or noStyle prop (handle both camelCase and lowercase)
+    // When noStyle is set, skip default styling (useful for light/dark mode image pairs)
+    const disableStyle = dataNoStyle === 'true' || dataNoStyle === true ||
+                         noStyle === true || noStyle === 'true' ||
+                         nostyle === true || nostyle === 'true';
+
+    // Apply base styles only if noStyle is not set
+    const baseStyles = disableStyle ? '' : 'rounded-xl my-6 border border-theme-border';
+
+    // Combine base styles with class and className (MDX might pass either)
+    const combinedClassName = `${baseStyles} ${htmlClass || ''} ${className || ''}`.trim();
+
+    return (
+      <ZoomableImage
+        src={src}
+        alt={alt || ''}
+        width={width}
+        height={height}
+        className={combinedClassName}
+        style={style}
+        loading={loading}
+        decoding={decoding}
+        noZoom={disableZoom}
+      />
+    );
+  },
+  h1: (props: any) => (
+    <h1 
+      className="text-3xl font-bold text-theme-text-primary mt-8 mb-4 tracking-tight" 
+      {...props} 
+    />
+  ),
+  h2: (props: any) => (
+    <h2 
+      className="text-2xl font-semibold text-theme-text-primary mt-10 mb-4 tracking-tight scroll-mt-20" 
+      {...props} 
+    />
+  ),
+  h3: (props: any) => (
+    <h3 
+      className="text-xl font-semibold text-theme-text-primary mt-8 mb-3 scroll-mt-20" 
+      {...props} 
+    />
+  ),
+  h4: (props: any) => (
+    <h4 
+      className="text-lg font-semibold text-theme-text-primary mt-6 mb-2 scroll-mt-20" 
+      {...props} 
+    />
+  ),
+  p: (props: any) => (
+    <p 
+      className="text-theme-text-secondary leading-7 mb-4" 
+      {...props} 
+    />
+  ),
+  ul: ({ class: htmlClass, className, ...props }: any) => (
+    <ul 
+      className={`list-disc list-inside text-theme-text-secondary space-y-2 mb-4 ml-4 ${htmlClass || ''} ${className || ''}`.trim()} 
+      {...props} 
+    />
+  ),
+  ol: ({ class: htmlClass, className, ...props }: any) => (
+    <ol 
+      className={`list-decimal list-inside text-theme-text-secondary space-y-2 mb-4 ml-4 ${htmlClass || ''} ${className || ''}`.trim()} 
+      {...props} 
+    />
+  ),
+  li: (props: any) => (
+    <li 
+      className="text-theme-text-secondary marker:text-theme-marker" 
+      {...props} 
+    />
+  ),
+  a: ({ ariaLabel, ...props }: any) => (
+    <a
+      className="text-theme-accent hover:text-theme-accent-hover transition-colors"
+      aria-label={ariaLabel}
+      {...props}
+    />
+  ),
+  blockquote: (props: any) => (
+    <blockquote
+      className="border-l-4 pl-4 text-theme-text-tertiary my-6 not-italic"
+      style={{ borderColor: 'var(--color-border)' }}
+      {...props}
+    />
+  ),
+  // Custom pre component to wrap code blocks with titles in CodePanel
+  pre: ({ children, 'data-title': dataTitle, ...props }: any) => {
+    const language = getCodeLanguage(props, children);
+
+    // Check for mermaid diagrams - render with Mermaid component
+    if (language === 'mermaid') {
+      const diagramCode = extractTextFromChildren(children);
+      return <Mermaid>{diagramCode}</Mermaid>;
+    }
+
+    // Check for HTTP code blocks - render with special styling
+    if (language === 'http') {
+      const codeText = extractTextFromChildren(children);
+      const parsed = parseHttpRequest(codeText);
+      if (parsed) {
+        return <HttpCodeBlock method={parsed.method} url={parsed.url} />;
+      }
+    }
+
+    // If no title, render the pre element directly
+    // Copy button is added by CodeBlockCopyButton client component
+    if (!dataTitle) {
+      return <pre {...props}>{children}</pre>;
+    }
+
+    // Wrap in CodePanel to show the title
+    const preElement = <pre {...props}>{children}</pre>;
+
+    return (
+      <CodePanel
+        tabs={[{ label: language, content: preElement, language }]}
+        title={dataTitle}
+        hideTabs={true}
+        className="my-6"
+        enableFullscreen
+      />
+    );
+  },
+  // Inline code styling is done via CSS in base.css (.prose :not(pre) > code)
+  table: (props: any) => (
+    <div className="overflow-x-auto my-6">
+      <table 
+        className="w-full text-sm border-collapse" 
+        {...props} 
+      />
+    </div>
+  ),
+  th: (props: any) => (
+    <th 
+      className="text-left font-semibold text-theme-text-primary p-3 border-b-2 border-theme-border bg-theme-bg-secondary" 
+      {...props} 
+    />
+  ),
+  td: (props: any) => (
+    <td 
+      className="p-3 border-b border-theme-border text-theme-text-secondary" 
+      {...props} 
+    />
+  ),
+  hr: (props: any) => (
+    <hr 
+      className="border-theme-border my-8" 
+      {...props} 
+    />
+  ),
+  // Generic div handler to convert class to className
+  div: ({ class: htmlClass, className, ...props }: any) => (
+    <div 
+      className={`${htmlClass || ''} ${className || ''}`.trim() || undefined} 
+      {...props} 
+    />
+  ),
+  // Generic span handler to convert class to className
+  span: ({ class: htmlClass, className, ...props }: any) => (
+    <span
+      className={`${htmlClass || ''} ${className || ''}`.trim() || undefined}
+      {...props}
+    />
+  ),
+};

package/vendored/components/mdx/Mermaid.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+// Skeleton shown during lazy load
+function MermaidSkeleton({ className }: { className?: string }) {
+  return (
+    <div
+      className={`my-6 flex justify-center ${className || ''}`}
+      data-testid="mermaid-skeleton"
+    >
+      <div className="animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg w-full max-w-xl h-48" />
+    </div>
+  );
+}
+
+// Dynamic import - ssr: false because mermaid requires browser APIs
+const MermaidInner = dynamic(
+  () => import('./MermaidInner').then(mod => ({ default: mod.MermaidInner })),
+  {
+    ssr: false,
+    loading: () => <MermaidSkeleton />
+  }
+);
+
+interface MermaidProps {
+  children: string;
+  className?: string;
+  /** Minimum width for the SVG diagram (e.g., "700px", "100%") */
+  minWidth?: string;
+}
+
+export function Mermaid({ children, className, minWidth }: MermaidProps) {
+  return <MermaidInner className={className} minWidth={minWidth}>{children}</MermaidInner>;
+}