@fragments-sdk/cli 0.2.2

package/src/viewer/components/CodePanel.tsx

@@ -0,0 +1,589 @@
+import { useState, useCallback, useMemo, useEffect, isValidElement, type ReactNode } from 'react';
+import type { SegmentVariant, PropDefinition } from '../../core/index.js';
+import { codeToHtml } from 'shiki';
+import clsx from 'clsx';
+import { CopyIcon, CheckIcon } from './Icons.js';
+
+interface CodePanelProps {
+  variant: SegmentVariant;
+  componentName: string;
+  compact?: boolean;
+  propDefs?: Record<string, PropDefinition>;
+}
+
+// Extract props from rendered element by calling render() and introspecting
+function extractPropsFromRender(variant: SegmentVariant, componentName: string): Record<string, unknown> | null {
+  try {
+    const rendered = variant.render();
+    if (!isValidElement(rendered)) return null;
+
+    // Check if this is the expected component (by displayName or name)
+    const elementType = rendered.type;
+    const typeName = typeof elementType === 'function'
+      ? (elementType as { displayName?: string; name?: string }).displayName || (elementType as { name?: string }).name
+      : typeof elementType === 'string' ? elementType : null;
+
+    // Only extract if it's a single element of the expected component type
+    if (typeName && typeName.toLowerCase() === componentName.toLowerCase()) {
+      return rendered.props as Record<string, unknown>;
+    }
+
+    // If it's a wrapper element, try to find the component in children
+    const props = rendered.props as { children?: ReactNode };
+    if (props.children && isValidElement(props.children)) {
+      const childType = props.children.type;
+      const childTypeName = typeof childType === 'function'
+        ? (childType as { displayName?: string; name?: string }).displayName || (childType as { name?: string }).name
+        : null;
+      if (childTypeName && childTypeName.toLowerCase() === componentName.toLowerCase()) {
+        return props.children.props as Record<string, unknown>;
+      }
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+// Check if the component likely needs state management
+function needsStatefulExample(componentName: string, propDefs?: Record<string, PropDefinition>): boolean {
+  const statefulComponents = ['toggle', 'checkbox', 'input', 'select', 'switch', 'radio'];
+  const lowerName = componentName.toLowerCase();
+
+  if (statefulComponents.some(c => lowerName.includes(c))) {
+    return true;
+  }
+
+  // Check if component has onChange/onChecked props
+  if (propDefs) {
+    const hasChangeHandler = Object.keys(propDefs).some(
+      key => key === 'onChange' || key === 'onChecked' || key === 'onValueChange'
+    );
+    const hasValueProp = Object.keys(propDefs).some(
+      key => key === 'value' || key === 'checked'
+    );
+    return hasChangeHandler && hasValueProp;
+  }
+
+  return false;
+}
+
+/**
+ * Convert compiled jsxDEV/jsx calls back to clean JSX syntax.
+ * Handles: jsxDEV(Component, { props, children }, ...) -> <Component props>children</Component>
+ */
+function decompileJsxDev(code: string, indent = 0): string {
+  const indentStr = '  '.repeat(indent);
+
+  // Match jsxDEV or jsx call: jsxDEV(Component, {props}, ...)
+  // Also handle _jsxDEV, /* @__PURE__ */ prefix
+  const jsxMatch = code.match(/(?:\/\*\s*@__PURE__\s*\*\/\s*)?_?jsxs?(?:DEV)?\s*\(\s*([^,]+)\s*,\s*(\{[\s\S]*\})\s*(?:,[\s\S]*)?\)$/);
+
+  if (!jsxMatch) {
+    // Not a jsxDEV call - might be a plain string or primitive
+    const trimmed = code.trim();
+    // If it's a quoted string, return the content
+    if ((trimmed.startsWith('"') && trimmed.endsWith('"')) ||
+        (trimmed.startsWith("'") && trimmed.endsWith("'"))) {
+      return trimmed.slice(1, -1);
+    }
+    return trimmed;
+  }
+
+  let componentName = jsxMatch[1].trim();
+  const propsStr = jsxMatch[2];
+
+  // Clean up component name (remove quotes for HTML elements)
+  if (componentName.startsWith('"') || componentName.startsWith("'")) {
+    componentName = componentName.slice(1, -1);
+  }
+
+  // Parse props object - extract key-value pairs
+  const props: Record<string, string> = {};
+  let children: string | null = null;
+
+  // Debug props that should be excluded (added by jsxDEV in development)
+  const debugProps = new Set(['fileName', 'lineNumber', 'columnNumber', '__source', '__self']);
+
+  // Simple prop extraction (handles most common cases)
+  // Match: key: value, key: "string", key: number, key: boolean
+  const propMatches = propsStr.matchAll(/(\w+)\s*:\s*("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[\w.]+|\{[^}]*\}|(?:\/\*[\s\S]*?\*\/\s*)?_?jsxs?(?:DEV)?\s*\([^)]*(?:\([^)]*\)[^)]*)*\))/g);
+
+  for (const match of propMatches) {
+    const key = match[1];
+    let value = match[2];
+
+    // Skip debug props
+    if (debugProps.has(key)) continue;
+
+    if (key === 'children') {
+      // Handle children specially
+      if (value.includes('jsxDEV') || value.includes('jsx(') || value.includes('_jsx')) {
+        // Nested JSX - recursively decompile
+        children = decompileJsxDev(value, indent + 1);
+      } else if (value.startsWith('"') || value.startsWith("'")) {
+        // String children
+        children = value.slice(1, -1);
+      } else {
+        children = `{${value}}`;
+      }
+    } else {
+      // Regular props
+      if (value.startsWith('"') || value.startsWith("'")) {
+        props[key] = value; // Keep as quoted string
+      } else if (value === 'true' || value === 'false') {
+        props[key] = value === 'true' ? `{true}` : `{false}`;
+      } else if (!isNaN(Number(value))) {
+        props[key] = `{${value}}`;
+      } else {
+        props[key] = `{${value}}`;
+      }
+    }
+  }
+
+  // Build JSX string
+  const propParts = Object.entries(props)
+    .filter(([k]) => k !== 'children')
+    .map(([k, v]) => {
+      // Convert camelCase event handlers back
+      if (v.startsWith('"') || v.startsWith("'")) {
+        return `${k}=${v}`;
+      }
+      return `${k}=${v}`;
+    });
+
+  const propsJsx = propParts.length > 0 ? ' ' + propParts.join(' ') : '';
+
+  if (children) {
+    if (children.includes('\n')) {
+      return `${indentStr}<${componentName}${propsJsx}>\n${children}\n${indentStr}</${componentName}>`;
+    }
+    return `${indentStr}<${componentName}${propsJsx}>${children}</${componentName}>`;
+  }
+
+  return `${indentStr}<${componentName}${propsJsx} />`;
+}
+
+/**
+ * Extract the JSX body from a render function's source code.
+ * Works with arrow functions like: () => <Component /> or () => (<div>...</div>)
+ * Also handles compiled jsxDEV calls and converts them back to JSX.
+ */
+function extractRenderBody(renderFn: () => ReactNode): string | null {
+  try {
+    const source = renderFn.toString();
+
+    // Match arrow function body: () => <...> or () => (...)
+    // Handle both: () => <X /> and () => (\n  <X />\n)
+    const arrowMatch = source.match(/^\s*\(\s*\)\s*=>\s*(.+)$/s);
+    if (arrowMatch) {
+      let body = arrowMatch[1].trim();
+
+      // Remove outer parentheses if present
+      if (body.startsWith('(') && body.endsWith(')')) {
+        body = body.slice(1, -1).trim();
+      }
+
+      // Check if this is compiled JSX (jsxDEV calls)
+      if (body.includes('jsxDEV') || body.includes('jsx(') || body.includes('_jsx')) {
+        return decompileJsxDev(body);
+      }
+
+      return body;
+    }
+
+    // Match function body with return statement
+    const returnMatch = source.match(/return\s*\(\s*([\s\S]*?)\s*\)\s*;?\s*\}?\s*$/);
+    if (returnMatch) {
+      const body = returnMatch[1].trim();
+
+      // Check if this is compiled JSX
+      if (body.includes('jsxDEV') || body.includes('jsx(') || body.includes('_jsx')) {
+        return decompileJsxDev(body);
+      }
+
+      return body;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export function CodePanel({ variant, componentName, compact = false, propDefs }: CodePanelProps) {
+  const [copied, setCopied] = useState(false);
+  const [highlightedHtml, setHighlightedHtml] = useState<string>('');
+
+  // Generate code - extract from render function source for accuracy
+  const generatedCode = useMemo(() => {
+    // Priority 1: Use variant.code if available (from compiled JSON/AST)
+    if (variant.code) {
+      return generateFullExample(componentName, variant.code);
+    }
+
+    // Priority 2: Extract source from render function (runtime)
+    if (variant.render) {
+      const renderBody = extractRenderBody(variant.render);
+      if (renderBody) {
+        return generateFullExample(componentName, renderBody);
+      }
+    }
+
+    // Priority 3: Generate from args (fallback for edge cases)
+    const needsState = needsStatefulExample(componentName, propDefs);
+    let effectiveArgs = variant.args;
+
+    // If no args on variant, try to extract from rendered element
+    if (!effectiveArgs || Object.keys(effectiveArgs).length === 0) {
+      effectiveArgs = extractPropsFromRender(variant, componentName) ?? undefined;
+    }
+
+    return generateCombinedCode(componentName, propDefs, effectiveArgs, needsState);
+  }, [componentName, variant, propDefs]);
+
+  // Apply syntax highlighting
+  useEffect(() => {
+    let cancelled = false;
+
+    codeToHtml(generatedCode, {
+      lang: 'tsx',
+      theme: 'one-dark-pro',
+    }).then(html => {
+      if (!cancelled) {
+        setHighlightedHtml(html);
+      }
+    }).catch(err => {
+      console.error('Syntax highlighting failed:', err);
+      if (!cancelled) {
+        // Fallback to plain text
+        setHighlightedHtml(`<pre><code>${escapeHtml(generatedCode)}</code></pre>`);
+      }
+    });
+
+    return () => { cancelled = true; };
+  }, [generatedCode]);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(generatedCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [generatedCode]);
+
+  return (
+    <div className="relative">
+      {/* Syntax highlighted code */}
+      <div
+        className={clsx(
+          'rounded-lg overflow-auto border border-[--border] bg-[#282c34]',
+          '[&_pre]:!bg-transparent [&_pre]:!m-0 [&_pre]:p-4',
+          '[&_code]:!bg-transparent [&_code]:text-[13px] [&_code]:leading-relaxed',
+          '[&_.shiki]:!bg-transparent',
+          // Custom selection highlight for better visibility
+          '[&_*::selection]:bg-blue-500/40 [&_*::selection]:text-white',
+          compact && '[&_code]:text-xs'
+        )}
+        style={{ maxHeight: 400 }}
+        dangerouslySetInnerHTML={{ __html: highlightedHtml || '<div class="p-4 text-gray-500 text-sm">Loading...</div>' }}
+      />
+
+      {/* Copy button - fixed to top right of editor */}
+      <button
+        onClick={handleCopy}
+        className={clsx(
+          'absolute top-2 right-2 flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md transition-all duration-200',
+          copied
+            ? 'bg-green-500/20 text-green-400 border border-green-500/30'
+            : 'bg-white/10 text-gray-300 border border-white/10 hover:bg-white/15 hover:text-white'
+        )}
+      >
+        {copied ? (
+          <>
+            <CheckIcon className="w-3.5 h-3.5" />
+            <span>Copied!</span>
+          </>
+        ) : (
+          <>
+            <CopyIcon className="w-3.5 h-3.5" />
+            <span>Copy</span>
+          </>
+        )}
+      </button>
+    </div>
+  );
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+/**
+ * Normalize indentation by removing common leading whitespace from all lines.
+ * Handles JSX where first line may be at column 0 but inner content is indented.
+ */
+function normalizeIndentation(code: string): string {
+  const lines = code.split('\n');
+  if (lines.length <= 1) return code;
+
+  // Find minimum indentation (ignoring empty lines and first line)
+  // First line often has 0 indent, but inner content is over-indented
+  let minIndent = Infinity;
+  const firstLineIndent = lines[0].match(/^(\s*)/)?.[1].length ?? 0;
+
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.trim().length === 0) continue;
+    const indent = line.match(/^(\s*)/)?.[1].length ?? 0;
+    minIndent = Math.min(minIndent, indent);
+  }
+
+  // If first line has indent, include it in calculation
+  if (firstLineIndent > 0) {
+    minIndent = Math.min(minIndent, firstLineIndent);
+  }
+
+  if (minIndent === Infinity || minIndent === 0) return code;
+
+  // Remove the common indentation from all lines
+  return lines
+    .map(line => line.slice(Math.min(minIndent, line.match(/^(\s*)/)?.[1].length ?? 0)))
+    .join('\n');
+}
+
+// Generate a full example from the variant's code string
+// Shows the ACTUAL code from the fragment file - no transformations
+function generateFullExample(
+  componentName: string,
+  variantCode: string
+): string {
+  // Normalize indentation first
+  const normalizedCode = normalizeIndentation(variantCode);
+
+  // Add component import
+  const imports = [`import { ${componentName} } from '@/components/${componentName}';`];
+
+  // Check if the code uses StatefulXxx wrapper - if so, include that helper
+  const statefulPattern = new RegExp(`<Stateful${componentName}`, 'i');
+  const usesStatefulWrapper = statefulPattern.test(normalizedCode);
+
+  if (usesStatefulWrapper) {
+    imports.unshift(`import { useState } from 'react';`);
+
+    // Determine the state type based on component
+    const lowerName = componentName.toLowerCase();
+    const isToggleLike = lowerName.includes('toggle') || lowerName.includes('checkbox') || lowerName.includes('switch');
+
+    const stateType = isToggleLike ? 'boolean' : 'string';
+    const defaultValue = isToggleLike ? 'false' : "''";
+    const stateName = isToggleLike ? 'checked' : 'value';
+    const setterName = isToggleLike ? 'setChecked' : 'setValue';
+    const valueProp = isToggleLike ? 'checked' : 'value';
+    const handlerProp = 'onChange';
+
+    // Generate the stateful wrapper helper that the code uses
+    const helperCode = `
+// Stateful wrapper for interactive demos
+function Stateful${componentName}(props: React.ComponentProps<typeof ${componentName}>) {
+  const [${stateName}, ${setterName}] = useState(props.${valueProp} ?? ${defaultValue});
+  return <${componentName} {...props} ${valueProp}={${stateName}} ${handlerProp}={${setterName}} />;
+}`;
+
+    return `${imports.join('\n')}
+${helperCode}
+
+// Example usage:
+${normalizedCode}`;
+  }
+
+  // For non-stateful code, just show the raw code with import
+  return `${imports.join('\n')}
+
+${normalizedCode}`;
+}
+
+// Generate combined import statement + JSX usage
+function generateCombinedCode(
+  componentName: string,
+  propDefs?: Record<string, PropDefinition>,
+  variantArgs?: Record<string, unknown>,
+  needsState?: boolean
+): string {
+  const imports: string[] = [];
+  const hooks: string[] = [];
+
+  if (needsState) {
+    imports.push(`import { useState } from 'react';`);
+  }
+  imports.push(`import { ${componentName} } from '@/components/${componentName}';`);
+
+  // Determine state props that will be managed by hooks (to avoid duplicates)
+  const lowerName = componentName.toLowerCase();
+  const isToggleLike = lowerName.includes('toggle') || lowerName.includes('checkbox') || lowerName.includes('switch');
+  const statePropsToSkip = needsState
+    ? isToggleLike
+      ? ['checked', 'onChange', 'onCheckedChange']
+      : ['value', 'onChange', 'onValueChange']
+    : [];
+
+  // Build props string - prefer actual variant args over prop definitions
+  const propsEntries: string[] = [];
+  let childrenValue: unknown = undefined;
+
+  if (variantArgs && Object.keys(variantArgs).length > 0) {
+    // Use actual variant args for accurate code generation
+    for (const [name, value] of Object.entries(variantArgs)) {
+      if (value === undefined) continue;
+
+      // Handle children specially - will be rendered as element content
+      if (name === 'children') {
+        childrenValue = value;
+        continue;
+      }
+
+      // Skip function props (callbacks) - they're runtime handlers
+      if (typeof value === 'function') continue;
+
+      // Skip props that will be managed by state hooks
+      if (statePropsToSkip.includes(name)) continue;
+
+      const propType = propDefs?.[name]?.type || typeof value;
+      const formattedValue = formatPropValue(value, propType);
+      propsEntries.push(`${name}=${formattedValue}`);
+    }
+  } else if (propDefs) {
+    // Fallback to prop definitions if no variant args
+    for (const [name, def] of Object.entries(propDefs)) {
+      if (name === 'children') {
+        if (def.default !== undefined) {
+          childrenValue = def.default;
+        }
+        continue;
+      }
+
+      // Skip props that will be managed by state hooks
+      if (statePropsToSkip.includes(name)) continue;
+
+      if (def.required && def.default !== undefined) {
+        const value = formatPropValue(def.default, def.type);
+        propsEntries.push(`${name}=${value}`);
+      } else if (def.required) {
+        const placeholder = getTypePlaceholder(name, def);
+        propsEntries.push(`${name}=${placeholder}`);
+      }
+    }
+  }
+
+  // Build JSX code
+  const hasChildren = childrenValue !== undefined && childrenValue !== null;
+  const childrenStr = hasChildren ? formatChildrenValue(childrenValue) : null;
+
+  // For stateful components, wrap in a function component
+  if (needsState) {
+    let stateName = 'value';
+    let setterName = 'setValue';
+    let handlerProp = 'onChange';
+    let valueProp = 'value';
+    let defaultValue = "''";
+    let stateType = 'string';
+
+    if (isToggleLike) {
+      stateType = 'boolean';
+      defaultValue = 'false';
+      stateName = 'checked';
+      setterName = 'setChecked';
+      handlerProp = propDefs?.['onCheckedChange'] ? 'onCheckedChange' : 'onChange';
+      valueProp = 'checked';
+    }
+
+    hooks.push(`const [${stateName}, ${setterName}] = useState<${stateType}>(${defaultValue});`);
+
+    // Add state props
+    propsEntries.push(`${valueProp}={${stateName}}`);
+    propsEntries.push(`${handlerProp}={${setterName}}`);
+
+    const propsStr = propsEntries.length > 0
+      ? `\n      ${propsEntries.join('\n      ')}\n    `
+      : ' ';
+
+    const jsxCode = hasChildren
+      ? `<${componentName}${propsStr}>${childrenStr}</${componentName}>`
+      : `<${componentName}${propsStr}/>`;
+
+    return `${imports.join('\n')}
+
+function Example() {
+  ${hooks.join('\n  ')}
+
+  return (
+    ${jsxCode}
+  );
+}`;
+  }
+
+  // Simple non-stateful code
+  let jsxCode: string;
+
+  if (propsEntries.length === 0 && !hasChildren) {
+    jsxCode = `<${componentName} />`;
+  } else if (propsEntries.length === 0 && hasChildren) {
+    jsxCode = `<${componentName}>${childrenStr}</${componentName}>`;
+  } else if (propsEntries.length === 1 && !hasChildren) {
+    jsxCode = `<${componentName} ${propsEntries[0]} />`;
+  } else if (propsEntries.length === 1 && hasChildren) {
+    jsxCode = `<${componentName} ${propsEntries[0]}>\n  ${childrenStr}\n</${componentName}>`;
+  } else if (!hasChildren) {
+    jsxCode = `<${componentName}\n  ${propsEntries.join('\n  ')}\n/>`;
+  } else {
+    jsxCode = `<${componentName}\n  ${propsEntries.join('\n  ')}\n>\n  ${childrenStr}\n</${componentName}>`;
+  }
+
+  return `${imports.join('\n')}
+
+${jsxCode}`;
+}
+
+function formatChildrenValue(value: unknown): string {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return `{${value}}`;
+  }
+  return '{/* children */}';
+}
+
+function formatPropValue(value: unknown, type: string): string {
+  if (type === 'string' || typeof value === 'string') {
+    return `"${value}"`;
+  }
+  if (type === 'boolean' || typeof value === 'boolean') {
+    return `{${value}}`;
+  }
+  if (type === 'number' || typeof value === 'number') {
+    return `{${value}}`;
+  }
+  return `{${JSON.stringify(value)}}`;
+}
+
+function getTypePlaceholder(name: string, def: PropDefinition): string {
+  if (def.values && def.values.length > 0) {
+    return `"${def.values[0]}"`;
+  }
+  switch (def.type) {
+    case 'string': return `"${name}"`;
+    case 'boolean': return '{true}';
+    case 'number': return '{0}';
+    case 'function': return '{() => {}}';
+    default: return '{undefined}';
+  }
+}