@fragments-sdk/cli 0.2.2

package/src/service/enhance/variant-renderer.ts

@@ -0,0 +1,479 @@
+/**
+ * Variant Renderer
+ *
+ * Uses Playwright to render Storybook stories and capture actual JSX/props
+ * from rendered components. This solves the problem where static AST extraction
+ * fails on complex components with variable references, expressions, or runtime values.
+ *
+ * How it works:
+ * 1. Navigates to a Storybook story URL in the iframe
+ * 2. Waits for the component to render
+ * 3. Extracts rendered props and component structure from the DOM
+ * 4. Generates JSX code representation of the rendered component
+ */
+
+import type { Page, BrowserContext } from "playwright";
+import { getSharedPool, shutdownSharedPool } from "../browser-pool.js";
+
+/**
+ * Rendered variant with extracted props and code
+ */
+export interface RenderedVariant {
+  /** Story name */
+  name: string;
+  /** Story display name */
+  displayName: string;
+  /** Description if available */
+  description?: string;
+  /** Extracted props from rendered component */
+  props: Record<string, unknown>;
+  /** Generated JSX code representation */
+  code: string;
+  /** Whether this is the default story */
+  isDefault: boolean;
+  /** Storybook story ID */
+  storyId: string;
+  /** Raw DOM element info for debugging */
+  domInfo?: {
+    tagName: string;
+    attributes: Record<string, string>;
+    childCount: number;
+  };
+}
+
+/**
+ * Result of rendering all variants for a component
+ */
+export interface VariantRenderResult {
+  /** Component name */
+  componentName: string;
+  /** Successfully rendered variants */
+  variants: RenderedVariant[];
+  /** Variants that failed to render with error messages */
+  failed: Array<{ storyId: string; error: string }>;
+  /** Total time taken to render all variants (ms) */
+  totalTimeMs: number;
+}
+
+/**
+ * Options for variant rendering
+ */
+export interface VariantRenderOptions {
+  /** Storybook base URL (e.g., "http://localhost:6006") */
+  storybookUrl: string;
+  /** Component name */
+  componentName: string;
+  /** Story IDs to render */
+  storyIds: string[];
+  /** Timeout for each story render (ms) */
+  timeout?: number;
+  /** Wait time after navigation for component to render (ms) */
+  renderWait?: number;
+  /** Selector for the component root (default: "#storybook-root") */
+  rootSelector?: string;
+}
+
+const DEFAULT_TIMEOUT = 10000;
+const DEFAULT_RENDER_WAIT = 1000;
+const DEFAULT_ROOT_SELECTOR = "#storybook-root";
+
+/**
+ * Render Storybook variants and extract props/code
+ */
+export async function renderVariants(
+  options: VariantRenderOptions
+): Promise<VariantRenderResult> {
+  const {
+    storybookUrl,
+    componentName,
+    storyIds,
+    timeout = DEFAULT_TIMEOUT,
+    renderWait = DEFAULT_RENDER_WAIT,
+    rootSelector = DEFAULT_ROOT_SELECTOR,
+  } = options;
+
+  const startTime = Date.now();
+  const result: VariantRenderResult = {
+    componentName,
+    variants: [],
+    failed: [],
+    totalTimeMs: 0,
+  };
+
+  if (storyIds.length === 0) {
+    result.totalTimeMs = Date.now() - startTime;
+    return result;
+  }
+
+  // Acquire browser context from pool
+  const pool = getSharedPool();
+  let context: BrowserContext | null = null;
+  let page: Page | null = null;
+
+  try {
+    context = await pool.acquire();
+    page = await context.newPage();
+
+    // Process each story
+    for (const storyId of storyIds) {
+      try {
+        const variant = await renderSingleVariant(
+          page,
+          storybookUrl,
+          storyId,
+          componentName,
+          rootSelector,
+          timeout,
+          renderWait
+        );
+        result.variants.push(variant);
+      } catch (error) {
+        result.failed.push({
+          storyId,
+          error: (error as Error).message,
+        });
+      }
+    }
+  } finally {
+    // Clean up
+    if (page) {
+      try {
+        await page.close();
+      } catch {
+        // Ignore cleanup errors
+      }
+    }
+    if (context) {
+      await pool.release(context);
+    }
+  }
+
+  result.totalTimeMs = Date.now() - startTime;
+  return result;
+}
+
+/**
+ * Render a single story and extract props/code
+ */
+async function renderSingleVariant(
+  page: Page,
+  storybookUrl: string,
+  storyId: string,
+  componentName: string,
+  rootSelector: string,
+  timeout: number,
+  renderWait: number
+): Promise<RenderedVariant> {
+  // Navigate to the story iframe URL
+  const storyUrl = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story`;
+  await page.goto(storyUrl, { timeout, waitUntil: "domcontentloaded" });
+
+  // Wait for the root element to appear
+  await page.waitForSelector(rootSelector, { timeout });
+
+  // Wait for component to render
+  await page.waitForTimeout(renderWait);
+
+  // Extract component information from the DOM
+  const extractionResult = await page.evaluate(
+    ({ rootSelector, componentName }) => {
+      const root = document.querySelector(rootSelector);
+      if (!root) {
+        throw new Error(`Root element not found: ${rootSelector}`);
+      }
+
+      // Find the first meaningful child element (skip wrapper divs)
+      function findComponentElement(el: Element): Element | null {
+        // If this element has the component name in its class or data attribute, use it
+        const className = el.className || "";
+        if (className.toLowerCase().includes(componentName.toLowerCase())) {
+          return el;
+        }
+
+        // Check for data attributes that might indicate component
+        if (el.getAttribute("data-component") || el.getAttribute("data-testid")) {
+          return el;
+        }
+
+        // If it's a simple wrapper with one child, go deeper
+        const children = Array.from(el.children);
+        if (children.length === 1 && el.tagName === "DIV") {
+          return findComponentElement(children[0]) || children[0];
+        }
+
+        // Return the first meaningful element
+        return el.firstElementChild;
+      }
+
+      const componentEl = findComponentElement(root) || root.firstElementChild;
+      if (!componentEl) {
+        throw new Error("No component element found in story");
+      }
+
+      // Extract attributes as props
+      const props: Record<string, unknown> = {};
+      const attributes: Record<string, string> = {};
+
+      for (const attr of Array.from(componentEl.attributes)) {
+        const name = attr.name;
+        let value: unknown = attr.value;
+
+        // Skip internal React/browser attributes
+        if (name.startsWith("data-") && !name.startsWith("data-testid")) {
+          continue;
+        }
+        if (name === "class" || name === "style") {
+          attributes[name] = attr.value;
+          continue;
+        }
+
+        // Try to parse boolean/number values
+        if (value === "true") value = true;
+        else if (value === "false") value = false;
+        else if (value !== "" && !isNaN(Number(value))) value = Number(value);
+
+        props[name] = value;
+        attributes[name] = attr.value;
+      }
+
+      // Check for special props through data attributes
+      const dataVariant = componentEl.getAttribute("data-variant");
+      if (dataVariant) props.variant = dataVariant;
+
+      const dataSize = componentEl.getAttribute("data-size");
+      if (dataSize) props.size = dataSize;
+
+      // Get DOM info for debugging
+      const domInfo = {
+        tagName: componentEl.tagName.toLowerCase(),
+        attributes,
+        childCount: componentEl.children.length,
+      };
+
+      // Get text content for simple components
+      const textContent = componentEl.textContent?.trim() || "";
+      if (textContent && !props.children && componentEl.children.length === 0) {
+        props.children = textContent;
+      }
+
+      return { props, domInfo };
+    },
+    { rootSelector, componentName }
+  );
+
+  // Generate JSX code from extracted props
+  const code = generateJSXCode(componentName, extractionResult.props);
+
+  // Parse story ID to get display name
+  const displayName = storyIdToDisplayName(storyId);
+  const isDefault =
+    storyId.toLowerCase().includes("--default") ||
+    storyId.toLowerCase().includes("--primary");
+
+  return {
+    name: displayName.replace(/\s+/g, ""),
+    displayName,
+    props: extractionResult.props,
+    code,
+    isDefault,
+    storyId,
+    domInfo: extractionResult.domInfo,
+  };
+}
+
+/**
+ * Generate JSX code from component name and props
+ */
+function generateJSXCode(
+  componentName: string,
+  props: Record<string, unknown>
+): string {
+  const { children, ...restProps } = props;
+
+  const propStrings = Object.entries(restProps)
+    .filter(([, value]) => value !== undefined && value !== null)
+    .map(([key, value]) => {
+      if (typeof value === "string") {
+        return `${key}="${value}"`;
+      }
+      if (typeof value === "boolean") {
+        return value ? key : null;
+      }
+      return `${key}={${JSON.stringify(value)}}`;
+    })
+    .filter(Boolean);
+
+  const propsString = propStrings.length > 0 ? ` ${propStrings.join(" ")}` : "";
+
+  if (children) {
+    return `<${componentName}${propsString}>${children}</${componentName}>`;
+  }
+  return `<${componentName}${propsString} />`;
+}
+
+/**
+ * Convert story ID to display name
+ * e.g., "components-button--primary" -> "Primary"
+ */
+function storyIdToDisplayName(storyId: string): string {
+  // Get the part after the last "--"
+  const parts = storyId.split("--");
+  const name = parts[parts.length - 1];
+
+  // Convert kebab-case to Title Case
+  return name
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+/**
+ * Check if Storybook is running at the given URL
+ */
+export async function checkStorybookRunning(
+  storybookUrl: string,
+  timeout: number = 5000
+): Promise<boolean> {
+  const pool = getSharedPool();
+  let context: BrowserContext | null = null;
+  let page: Page | null = null;
+
+  try {
+    context = await pool.acquire();
+    page = await context.newPage();
+
+    await page.goto(storybookUrl, { timeout, waitUntil: "domcontentloaded" });
+
+    // Check for Storybook-specific elements
+    const isStorybook = await page.evaluate(() => {
+      // Check for Storybook manager or preview
+      return !!(
+        document.querySelector("#storybook-root") ||
+        document.querySelector("#storybook-preview-wrapper") ||
+        document.querySelector("[data-is-storybook]") ||
+        // Check for common Storybook title patterns
+        document.title.includes("Storybook")
+      );
+    });
+
+    return isStorybook;
+  } catch {
+    return false;
+  } finally {
+    if (page) {
+      try {
+        await page.close();
+      } catch {
+        // Ignore
+      }
+    }
+    if (context) {
+      await pool.release(context);
+    }
+  }
+}
+
+/**
+ * Get all story IDs for a component from Storybook
+ */
+export async function getStorybookStoryIds(
+  storybookUrl: string,
+  componentName: string,
+  timeout: number = 10000
+): Promise<string[]> {
+  const pool = getSharedPool();
+  let context: BrowserContext | null = null;
+  let page: Page | null = null;
+
+  try {
+    context = await pool.acquire();
+    page = await context.newPage();
+
+    // Navigate to Storybook index
+    await page.goto(`${storybookUrl}/index.json`, {
+      timeout,
+      waitUntil: "networkidle",
+    });
+
+    // Parse the index.json to get stories
+    const content = await page.evaluate(() => {
+      const pre = document.querySelector("pre");
+      return pre?.textContent || document.body.textContent || "";
+    });
+
+    const data = JSON.parse(content);
+
+    // Find stories matching the component name
+    const storyIds: string[] = [];
+    const componentLower = componentName.toLowerCase();
+
+    if (data.entries) {
+      // Storybook 7+ format
+      for (const [id, entry] of Object.entries(data.entries)) {
+        const e = entry as { type?: string; title?: string };
+        if (
+          e.type === "story" &&
+          e.title?.toLowerCase().includes(componentLower)
+        ) {
+          storyIds.push(id);
+        }
+      }
+    } else if (data.stories) {
+      // Legacy format
+      for (const [id, story] of Object.entries(data.stories)) {
+        const s = story as { kind?: string };
+        if (s.kind?.toLowerCase().includes(componentLower)) {
+          storyIds.push(id);
+        }
+      }
+    }
+
+    return storyIds;
+  } catch {
+    return [];
+  } finally {
+    if (page) {
+      try {
+        await page.close();
+      } catch {
+        // Ignore
+      }
+    }
+    if (context) {
+      await pool.release(context);
+    }
+  }
+}
+
+/**
+ * Render all variants for a component from a running Storybook
+ */
+export async function renderAllComponentVariants(
+  storybookUrl: string,
+  componentName: string,
+  options: Partial<VariantRenderOptions> = {}
+): Promise<VariantRenderResult> {
+  // Get story IDs for this component
+  const storyIds = await getStorybookStoryIds(storybookUrl, componentName);
+
+  if (storyIds.length === 0) {
+    return {
+      componentName,
+      variants: [],
+      failed: [],
+      totalTimeMs: 0,
+    };
+  }
+
+  return renderVariants({
+    storybookUrl,
+    componentName,
+    storyIds,
+    ...options,
+  });
+}
+
+/**
+ * Shutdown the browser pool when done
+ */
+export { shutdownSharedPool };