storybook-onbook-plugin 0.2.1 → 0.2.3

package/dist/cli/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli/index.js

@@ -0,0 +1,395 @@
+#!/usr/bin/env node
+import { command, string, run } from '@drizzle-team/brocli';
+import { spawn } from 'child_process';
+import path, { resolve, join, dirname } from 'path';
+import crypto from 'crypto';
+import fs, { existsSync, readFileSync } from 'fs';
+import { chromium } from 'playwright';
+
+var CACHE_DIR = path.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path.join(CACHE_DIR, "manifest.json");
+var VIEWPORT_WIDTH = 1920;
+var VIEWPORT_HEIGHT = 1080;
+var MIN_COMPONENT_WIDTH = 420;
+var MIN_COMPONENT_HEIGHT = 280;
+
+// src/utils/fileSystem/fileSystem.ts
+function ensureCacheDirectories() {
+  if (!fs.existsSync(CACHE_DIR)) {
+    fs.mkdirSync(CACHE_DIR, { recursive: true });
+  }
+  if (!fs.existsSync(SCREENSHOTS_DIR)) {
+    fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  }
+}
+function computeFileHash(filePath) {
+  if (!fs.existsSync(filePath)) {
+    return "";
+  }
+  const content = fs.readFileSync(filePath, "utf-8");
+  return crypto.createHash("sha256").update(content).digest("hex");
+}
+function loadManifest() {
+  if (fs.existsSync(MANIFEST_PATH)) {
+    const content = fs.readFileSync(MANIFEST_PATH, "utf-8");
+    return JSON.parse(content);
+  }
+  return { stories: {} };
+}
+function saveManifest(manifest) {
+  ensureCacheDirectories();
+  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+}
+function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
+  const manifest = loadManifest();
+  manifest.stories[storyId] = {
+    fileHash,
+    lastGenerated: (/* @__PURE__ */ new Date()).toISOString(),
+    sourcePath,
+    screenshots: {
+      light: `screenshots/${storyId}/light.png`,
+      dark: `screenshots/${storyId}/dark.png`
+    },
+    boundingBox: boundingBox ?? void 0
+  };
+  saveManifest(manifest);
+}
+var browser = null;
+async function getBrowser() {
+  if (!browser) {
+    browser = await chromium.launch({
+      headless: true
+    });
+  }
+  return browser;
+}
+async function closeBrowser() {
+  if (browser) {
+    try {
+      await browser.close();
+    } catch (error) {
+      console.error("Error closing browser:", error);
+    } finally {
+      browser = null;
+    }
+  }
+}
+function getScreenshotPath(storyId, theme) {
+  const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+  return path.join(storyDir, `${theme}.png`);
+}
+async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006") {
+  const browser2 = await getBrowser();
+  const context = await browser2.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 2
+  });
+  const page = await context.newPage();
+  try {
+    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
+    await page.goto(url, { timeout: 15e3 });
+    await page.waitForLoadState("domcontentloaded");
+    await page.waitForLoadState("load");
+    await page.waitForLoadState("networkidle");
+    await page.evaluate(() => document.fonts.ready);
+    await page.evaluate(async () => {
+      const images = document.querySelectorAll("img");
+      await Promise.all(
+        Array.from(images).map((img) => {
+          if (img.complete) return Promise.resolve();
+          return new Promise((resolve3) => {
+            img.addEventListener("load", resolve3);
+            img.addEventListener("error", resolve3);
+          });
+        })
+      );
+    });
+    const contentBounds = await page.evaluate(() => {
+      const root = document.querySelector("#storybook-root");
+      if (!root) return null;
+      const children = root.querySelectorAll("*");
+      if (children.length === 0) return null;
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      children.forEach((child) => {
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        minX = Math.min(minX, rect.left);
+        minY = Math.min(minY, rect.top);
+        maxX = Math.max(maxX, rect.right);
+        maxY = Math.max(maxY, rect.bottom);
+      });
+      if (minX === Infinity) return null;
+      return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+      };
+    });
+    let screenshotBuffer;
+    let resultBoundingBox = null;
+    if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
+      const PADDING = 20;
+      const clippedWidth = Math.min(width, contentBounds.width + PADDING);
+      const clippedHeight = Math.min(height, contentBounds.height + PADDING);
+      resultBoundingBox = {
+        width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
+        height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight))
+      };
+      screenshotBuffer = await page.screenshot({
+        type: "png",
+        clip: {
+          x: Math.max(0, contentBounds.x - 10),
+          y: Math.max(0, contentBounds.y - 10),
+          width: clippedWidth,
+          height: clippedHeight
+        }
+      });
+    } else {
+      screenshotBuffer = await page.screenshot({ type: "png" });
+    }
+    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox };
+  } finally {
+    await context.close();
+  }
+}
+async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006") {
+  try {
+    ensureCacheDirectories();
+    const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+    if (!fs.existsSync(storyDir)) {
+      fs.mkdirSync(storyDir, { recursive: true });
+    }
+    const screenshotPath = getScreenshotPath(storyId, theme);
+    const { buffer, boundingBox } = await captureScreenshotBuffer(
+      storyId,
+      theme,
+      VIEWPORT_WIDTH,
+      VIEWPORT_HEIGHT,
+      storybookUrl
+    );
+    fs.writeFileSync(screenshotPath, buffer);
+    return { path: screenshotPath, boundingBox };
+  } catch (error) {
+    console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
+    return null;
+  }
+}
+
+// src/screenshot-service/screenshot-service.ts
+async function generateAllScreenshots(stories, storybookUrl = "http://localhost:6006") {
+  console.log(`Generating screenshots for ${stories.length} stories...`);
+  const BATCH_SIZE = 10;
+  const batches = [];
+  for (let i = 0; i < stories.length; i += BATCH_SIZE) {
+    batches.push(stories.slice(i, i + BATCH_SIZE));
+  }
+  let completed = 0;
+  for (const batch of batches) {
+    await Promise.all(
+      batch.map(async (story) => {
+        const [lightResult, darkResult] = await Promise.all([
+          generateScreenshot(story.id, "light", storybookUrl),
+          generateScreenshot(story.id, "dark", storybookUrl)
+        ]);
+        if (lightResult && darkResult) {
+          const fileHash = computeFileHash(story.importPath);
+          updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
+        }
+        completed++;
+        console.log(
+          `[${completed}/${stories.length}] Generated screenshots for ${story.id}`
+        );
+      })
+    );
+  }
+  await closeBrowser();
+  console.log("Screenshot generation complete!");
+}
+var LOCKFILES = {
+  "bun.lockb": "bun",
+  "bun.lock": "bun",
+  "pnpm-lock.yaml": "pnpm",
+  "yarn.lock": "yarn",
+  "package-lock.json": "npm"
+};
+function findRepoRoot(startDir) {
+  let currentDir = resolve(startDir);
+  while (true) {
+    for (const lockfile of Object.keys(LOCKFILES)) {
+      if (existsSync(join(currentDir, lockfile))) {
+        return currentDir;
+      }
+    }
+    const parentDir = dirname(currentDir);
+    if (parentDir === currentDir) {
+      return null;
+    }
+    currentDir = parentDir;
+  }
+}
+function detectPackageManager(repoRoot) {
+  for (const [lockfile, pm] of Object.entries(LOCKFILES)) {
+    if (existsSync(join(repoRoot, lockfile))) {
+      return pm;
+    }
+  }
+  return "npm";
+}
+function getStorybookScript(storybookDir) {
+  const packageJsonPath = join(storybookDir, "package.json");
+  if (!existsSync(packageJsonPath)) {
+    return null;
+  }
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+  return packageJson.scripts?.storybook ?? null;
+}
+
+// src/cli/generate-screenshots/generate-screenshots.ts
+function getStorybookCommand(storybookDir) {
+  const script = getStorybookScript(storybookDir);
+  if (script === null) {
+    const packageJsonPath = join(storybookDir, "package.json");
+    throw new Error(
+      `No "storybook" script found in ${packageJsonPath}. Use --storybook-dir to specify the correct directory or add a storybook script.`
+    );
+  }
+  const repoRoot = findRepoRoot(storybookDir);
+  const pm = repoRoot ? detectPackageManager(repoRoot) : "npm";
+  console.log(
+    `\u{1F4E6} Detected package manager: ${pm}${repoRoot ? ` (from ${repoRoot})` : ""}`
+  );
+  return `${pm} run storybook`;
+}
+async function isStorybookRunning(url) {
+  try {
+    const response = await fetch(`${url}/index.json`, {
+      signal: AbortSignal.timeout(2e3)
+    });
+    return response.ok;
+  } catch {
+    return false;
+  }
+}
+async function fetchStoryIndex(url) {
+  const indexUrl = `${url}/index.json`;
+  const response = await fetch(indexUrl);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch story index: ${response.statusText}`);
+  }
+  const data = await response.json();
+  return Object.values(data.entries);
+}
+async function startStorybook(cmd, storybookDir) {
+  console.log(`\u{1F680} Starting Storybook with: ${cmd} (in ${storybookDir})`);
+  const [command2, ...args] = cmd.split(" ");
+  if (!command2) {
+    throw new Error("Invalid storybook command");
+  }
+  const storybookProcess = spawn(command2, [...args, "--", "--no-open"], {
+    cwd: storybookDir,
+    stdio: "pipe",
+    shell: true
+  });
+  return new Promise((resolve3, reject) => {
+    let started = false;
+    const timeout = setTimeout(() => {
+      if (!started) {
+        storybookProcess.kill();
+        reject(new Error("Storybook failed to start within 60 seconds"));
+      }
+    }, 6e4);
+    storybookProcess.stdout?.on("data", (data) => {
+      const output = data.toString();
+      if (output.includes("Local:") || output.includes("localhost:")) {
+        if (!started) {
+          started = true;
+          clearTimeout(timeout);
+          console.log("\u2705 Storybook is ready!");
+          resolve3(storybookProcess);
+        }
+      }
+    });
+    storybookProcess.stderr?.on("data", (data) => {
+      const output = data.toString();
+      if (output.toLowerCase().includes("error")) {
+        console.error(output);
+      }
+    });
+    storybookProcess.on("error", (error) => {
+      clearTimeout(timeout);
+      reject(error);
+    });
+  });
+}
+async function warmupStorybook(url, firstStoryId) {
+  console.log("\u{1F525} Warming up Storybook...");
+  const browser2 = await getBrowser();
+  const context = await browser2.newContext();
+  const page = await context.newPage();
+  try {
+    const warmupUrl = `${url}/iframe.html?id=${firstStoryId}&viewMode=story`;
+    await page.goto(warmupUrl, { timeout: 15e3 });
+    await page.waitForLoadState("networkidle");
+    console.log("\u2705 Storybook warmed up");
+  } catch {
+    console.log("\u26A0\uFE0F Warmup had issues, proceeding anyway");
+  } finally {
+    await context.close();
+  }
+}
+async function generateScreenshots(options = {}) {
+  const url = "http://localhost:6006";
+  const storybookDir = resolve(options.storybookDir ?? process.cwd());
+  let storybookProcess = null;
+  let weStartedStorybook = false;
+  console.log("\u{1F4F8} Generating Storybook screenshots...");
+  console.log(`\u{1F4C2} Storybook directory: ${storybookDir}`);
+  try {
+    const alreadyRunning = await isStorybookRunning(url);
+    if (alreadyRunning) {
+      console.log("\u2705 Storybook is already running");
+    } else {
+      const cmd = getStorybookCommand(storybookDir);
+      storybookProcess = await startStorybook(cmd, storybookDir);
+      weStartedStorybook = true;
+    }
+    const stories = await fetchStoryIndex(url);
+    console.log(`Found ${stories.length} stories`);
+    const firstStory = stories[0];
+    if (!firstStory) {
+      throw new Error("No stories found");
+    }
+    await warmupStorybook(url, firstStory.id);
+    await generateAllScreenshots(
+      stories.map((story) => ({
+        id: story.id,
+        importPath: story.importPath
+      })),
+      url
+    );
+    console.log("\u2705 Screenshot generation complete!");
+  } finally {
+    if (storybookProcess && weStartedStorybook) {
+      console.log("\u{1F6D1} Stopping Storybook...");
+      storybookProcess.kill();
+    }
+  }
+}
+
+// src/cli/index.ts
+var generateScreenshotsCommand = command({
+  name: "generate-screenshots",
+  desc: "Generate screenshots for all Storybook stories",
+  options: {
+    storybookDir: string().alias("d").desc("Directory containing Storybook (defaults to current directory)")
+  },
+  handler: async (opts) => {
+    await generateScreenshots({ storybookDir: opts.storybookDir });
+  }
+});
+run([generateScreenshotsCommand], {
+  name: "storybook-onbook-plugin",
+  description: "Storybook plugin for Onbook - generate screenshots and more"
+});

package/dist/index.d.ts

@@ -1,2 +1,11 @@
-export { type OnlookPluginOptions, storybookOnlookPlugin, } from './storybook-onlook-plugin.js';
-//# sourceMappingURL=index.d.ts.map
+import { PluginOption } from 'vite';
+
+type OnlookPluginOptions = {
+    /** Storybook port (default: 6006) */
+    port?: number;
+    /** Additional allowed origins for CORS (merged with defaults) */
+    allowedOrigins?: string[];
+};
+declare function storybookOnlookPlugin(options?: OnlookPluginOptions): PluginOption[];
+
+export { type OnlookPluginOptions, storybookOnlookPlugin };