@onlook/storybook-plugin 0.4.0-beta.1 → 0.4.0-beta.2

package/dist/index.js

@@ -1,7 +1,6 @@
 import fs5, { existsSync } from 'fs';
-import path, { dirname, join, relative } from 'path';
+import path6, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
-import autoStoryGenerator from '@takuma-ru/auto-story-generator';
 import { withDefaultConfig } from 'react-docgen-typescript';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -10,7 +9,12 @@ import * as t from '@babel/types';
 import crypto from 'crypto';
 import { chromium } from 'playwright';
 
-// src/storybook-onlook-plugin.ts
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
 var FIXED_MARKER = "// @onlook-fixed";
 var parser = withDefaultConfig({
   shouldExtractLiteralValuesFromEnum: true,
@@ -21,11 +25,11 @@ var parser = withDefaultConfig({
   }
 });
 function resolveComponentPath(storyFilePath) {
-  const dir = path.dirname(storyFilePath);
-  const parentDir = path.dirname(dir);
-  const storyName = path.basename(storyFilePath);
+  const dir = path6.dirname(storyFilePath);
+  const parentDir = path6.dirname(dir);
+  const storyName = path6.basename(storyFilePath);
   const componentName = storyName.replace(".stories.tsx", ".tsx");
-  const componentPath = path.join(parentDir, componentName);
+  const componentPath = path6.join(parentDir, componentName);
   return fs5.existsSync(componentPath) ? componentPath : null;
 }
 function generateArgTypes(componentPath) {
@@ -87,7 +91,7 @@ export default meta;`
     );
     if (enriched !== content) {
       fs5.writeFileSync(storyFilePath, enriched);
-      console.log(`[AutoStories] Enriched ${path.basename(storyFilePath)} with argTypes`);
+      console.log(`[AutoStories] Enriched ${path6.basename(storyFilePath)} with argTypes`);
     }
   } catch (err) {
     console.error(`[AutoStories] Failed to enrich story: ${storyFilePath}`, err);
@@ -115,7 +119,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path.relative(root, filepath);
+      const relativePath = path6.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -152,9 +156,9 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-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 CACHE_DIR = path6.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path6.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path6.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -211,8 +215,8 @@ async function getBrowser() {
   return browser;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path.join(SCREENSHOTS_DIR, storyId);
-  return path.join(storyDir, `${theme}.png`);
+  const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
+  return path6.join(storyDir, `${theme}.png`);
 }
 async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, height = VIEWPORT_HEIGHT, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   const browser2 = await getBrowser();
@@ -299,7 +303,7 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path.join(SCREENSHOTS_DIR, storyId);
+    const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
     if (!fs5.existsSync(storyDir)) {
       fs5.mkdirSync(storyDir, { recursive: true });
     }
@@ -339,7 +343,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path.basename(filePath);
+  const fileName = path6.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -428,6 +432,18 @@ var DEFAULT_ALLOWED_ORIGINS = [
 ];
 var AUTO_STORIES_FOLDER = ".onlook-stories";
 var storyRuntimeErrors = /* @__PURE__ */ new Map();
+var discoveryConfig = {
+  imports: ["src/**/*.tsx"],
+  ignores: []
+};
+function deriveTitleFromPath(filePath) {
+  const parts = filePath.replace(/^src\//, "").split("/");
+  parts.pop();
+  return parts.filter((p) => !p.startsWith("(") && !p.startsWith("[")).join("/");
+}
+function toStoryId(title, name) {
+  return `${title.replace(/\//g, "-").toLowerCase()}--${name.toLowerCase()}`;
+}
 var serveMetadataAndScreenshots = (req, res, next) => {
   if (req.url === "/onbook-health.json") {
     const cacheBuster = Date.now();
@@ -499,9 +515,124 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     });
     return;
   }
+  if (req.url === "/onbook-components.json") {
+    try {
+      const { globSync } = __require("glob");
+      const files = discoveryConfig.imports.flatMap(
+        (pattern) => globSync(pattern, {
+          ignore: discoveryConfig.ignores,
+          cwd: process.cwd()
+        })
+      );
+      const components = files.map((file) => ({
+        filePath: file,
+        componentName: path6.basename(file, path6.extname(file)),
+        title: deriveTitleFromPath(file)
+      }));
+      res.setHeader("Content-Type", "application/json");
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.end(JSON.stringify({ components }));
+    } catch (error) {
+      res.statusCode = 500;
+      res.setHeader("Content-Type", "application/json");
+      res.end(
+        JSON.stringify({
+          error: "Failed to discover components",
+          details: String(error)
+        })
+      );
+    }
+    return;
+  }
+  if (req.url === "/onbook-generate-story" && req.method === "POST") {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        const { filePath } = JSON.parse(body);
+        if (!filePath) {
+          res.statusCode = 400;
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ error: "filePath is required" }));
+          return;
+        }
+        const absPath = path6.resolve(filePath);
+        const dir = path6.dirname(absPath);
+        const ext = path6.extname(absPath);
+        const baseName = path6.basename(absPath, ext);
+        const storyDir = path6.join(dir, AUTO_STORIES_FOLDER);
+        const storyPath = path6.join(storyDir, `${baseName}.stories.tsx`);
+        const title = deriveTitleFromPath(filePath);
+        const storyId = toStoryId(title, "default");
+        if (fs5.existsSync(storyPath)) {
+          res.setHeader("Content-Type", "application/json");
+          res.setHeader("Access-Control-Allow-Origin", "*");
+          res.end(
+            JSON.stringify({
+              storyId,
+              storyPath,
+              importPath: `./${filePath.replace(ext, `/${AUTO_STORIES_FOLDER}/${baseName}.stories.tsx`)}`,
+              existed: true
+            })
+          );
+          return;
+        }
+        const storyContent = [
+          "import type { Meta, StoryObj } from '@storybook/react';",
+          `import ${baseName} from '../${baseName}';`,
+          "",
+          `const meta: Meta<typeof ${baseName}> = {`,
+          `  title: '${title}',`,
+          `  component: ${baseName},`,
+          "};",
+          "export default meta;",
+          "",
+          `type Story = StoryObj<typeof ${baseName}>;`,
+          "",
+          "export const Default: Story = {};",
+          ""
+        ].join("\n");
+        if (!fs5.existsSync(storyDir)) {
+          fs5.mkdirSync(storyDir, { recursive: true });
+        }
+        fs5.writeFileSync(storyPath, storyContent);
+        console.log(`[STORYBOOK_PLUGIN] Generated story: ${storyPath}`);
+        res.setHeader("Content-Type", "application/json");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        res.end(
+          JSON.stringify({
+            storyId,
+            storyPath,
+            importPath: `./${path6.relative(process.cwd(), storyPath)}`,
+            existed: false
+          })
+        );
+      } catch (error) {
+        res.statusCode = 500;
+        res.setHeader("Content-Type", "application/json");
+        res.end(
+          JSON.stringify({
+            error: "Failed to generate story",
+            details: String(error)
+          })
+        );
+      }
+    });
+    return;
+  }
+  if (req.method === "OPTIONS" && req.url?.startsWith("/onbook-")) {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    res.statusCode = 204;
+    res.end();
+    return;
+  }
   if (req.url === "/onbook-index.json") {
     console.log("[STORYBOOK_PLUGIN] Serving /onbook-index.json endpoint");
-    const manifestPath = path.join(process.cwd(), ".storybook-cache", "manifest.json");
+    const manifestPath = path6.join(process.cwd(), ".storybook-cache", "manifest.json");
     const cacheBuster = Date.now();
     console.log("[STORYBOOK_PLUGIN] Fetching http://localhost:6006/index.json");
     fetch(`http://localhost:6006/index.json?_t=${cacheBuster}`, {
@@ -586,7 +717,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path.join(
+    const screenshotPath = path6.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -607,7 +738,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path.join(
+        const storyDir = path6.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
@@ -699,8 +830,8 @@ function storybookOnlookPlugin(options = {}) {
   };
   const plugins = [componentLocPlugin(), mainPlugin];
   if (options.autoStories !== false) {
-    const imports = options.autoStories ?? ["src/**/*.tsx"];
-    const ignores = options.autoStoriesIgnore ?? [
+    discoveryConfig.imports = options.autoStories ?? ["src/**/*.tsx"];
+    discoveryConfig.ignores = options.autoStoriesIgnore ?? [
       "src/**/*.stories.tsx",
       "src/**/*.stories.ts",
       "src/**/*.test.tsx",
@@ -710,27 +841,10 @@ function storybookOnlookPlugin(options = {}) {
       "node_modules/**",
       "**/.onlook-stories/**"
     ];
-    console.log("[STORYBOOK_PLUGIN] Auto-story generation enabled", {
-      imports,
-      ignores,
-      storiesFolder: AUTO_STORIES_FOLDER
+    console.log("[STORYBOOK_PLUGIN] Component discovery configured", {
+      imports: discoveryConfig.imports,
+      ignores: discoveryConfig.ignores
     });
-    try {
-      plugins.push(
-        autoStoryGenerator.vite({
-          preset: "react",
-          imports,
-          ignores,
-          storiesFolder: AUTO_STORIES_FOLDER,
-          isGenerateStoriesFileAtBuild: true
-        })
-      );
-    } catch (err) {
-      console.error(
-        "[STORYBOOK_PLUGIN] ASG plugin failed to initialize, continuing without auto-stories",
-        err
-      );
-    }
   }
   return plugins;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.2",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -37,7 +37,7 @@
     "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.26.9",
     "@drizzle-team/brocli": "^0.11.0",
-    "@takuma-ru/auto-story-generator": "^0.4.0",
+    "glob": "^11.0.0",
     "playwright": "^1.52.0",
     "react-docgen-typescript": "^2.4.0"
   },