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

package/dist/index.js

@@ -1,6 +1,10 @@
-import fs5, { existsSync } from 'fs';
-import path6, { dirname, join, relative } from 'path';
+import fs, { existsSync } from 'fs';
+import path3, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
+import { minimatch } from 'minimatch';
+import * as prettier from 'prettier';
+import { Project, SyntaxKind, ts, TypeFlags } from 'ts-morph';
+import { glob } from 'glob';
 import { withDefaultConfig } from 'react-docgen-typescript';
 import generateModule from '@babel/generator';
 import { parse } from '@babel/parser';
@@ -9,12 +13,600 @@ import * as t from '@babel/types';
 import crypto from 'crypto';
 import { chromium } from 'playwright';
 
-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');
-});
+// src/storybook-onlook-plugin.ts
+function getComponentInfo(componentDir, projectRootDir) {
+  const fileParseInfo = path3.parse(componentDir);
+  const prefixExtRegex = new RegExp(`(\\.\\w+)+(?=\\${fileParseInfo.ext}$)`);
+  const prefixExtRegexMatch = fileParseInfo.base.match(prefixExtRegex);
+  const prefixExt = prefixExtRegexMatch ? prefixExtRegexMatch[0] : void 0;
+  const fileName = fileParseInfo.name.replace(prefixExt || "", "");
+  const componentName = fileName === "index" ? fileParseInfo.dir.split("/").pop() : fileName;
+  let relativeSourceFilePath = componentDir.replace(projectRootDir, "");
+  if (relativeSourceFilePath.startsWith("/") || relativeSourceFilePath.startsWith("\\")) {
+    relativeSourceFilePath = componentDir.replace(projectRootDir, "").slice(1);
+  }
+  return {
+    fileBase: fileParseInfo.base,
+    fileExt: fileParseInfo.ext,
+    fileName,
+    filePrefixExt: prefixExt,
+    componentName,
+    relativeSourceFilePath
+  };
+}
+function pascalCase(str) {
+  return str.replace(/[_\-.\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : "").replace(/^(.)/, (_, c) => c.toUpperCase());
+}
+function removeQuotesAndWrapWithDoubleQuotes(str) {
+  const quoteRemovedStr = str.replace(/"/g, "").replace(/'/g, "");
+  return quoteRemovedStr;
+}
+function getTypeFlagsName(flags) {
+  const keys = Object.keys(TypeFlags);
+  const setFlags = keys.find((key) => flags === TypeFlags[key]);
+  return setFlags || "err";
+}
+function getReactPropTypes({
+  sourceFile,
+  componentName
+}) {
+  if (!componentName) {
+    return {
+      propTypes: void 0
+    };
+  }
+  let propsPattern = "component-props";
+  const pascalComponentName = pascalCase(componentName);
+  const propsType = sourceFile.getTypeAlias(`${pascalComponentName}Props`);
+  const propsInterface = sourceFile.getInterface(`${pascalComponentName}Props`);
+  const propsOnlyType = sourceFile.getTypeAlias("Props");
+  const propsOnlyInterface = sourceFile.getInterface("Props");
+  const propsInline = sourceFile.getVariableDeclaration(pascalComponentName)?.getInitializerIfKindOrThrow(ts.SyntaxKind.ArrowFunction);
+  const props = propsType?.getType() || propsInterface?.getType() || propsOnlyType?.getType() || propsOnlyInterface?.getType() || propsInline?.getParameters()[0]?.getType();
+  if (!props) {
+    return {
+      propTypes: []
+    };
+  }
+  let propsProperties = [];
+  const isPropsIntersection = props.isIntersection();
+  if (isPropsIntersection) {
+    propsProperties = [];
+    const intersectionTypes = props.getIntersectionTypes();
+    intersectionTypes.forEach((intersectionType) => {
+      const intersectionTypeText = intersectionType.getText();
+      if (intersectionTypeText.includes("HTMLAttributes")) return;
+      return propsProperties.push(...intersectionType.getProperties());
+    });
+  } else {
+    propsProperties = props.getProperties();
+  }
+  if (propsOnlyType || propsOnlyInterface) propsPattern = "props";
+  if (propsInline) propsPattern = "inline";
+  const propTypes = propsProperties.map((prop) => {
+    const propName = prop.getName();
+    const propType = prop.getValueDeclaration()?.getType();
+    if (!propType) {
+      return {
+        name: propName,
+        type: ["err"],
+        isOptional: prop.isOptional(),
+        value: []
+      };
+    }
+    if (propType.isUnion() && !propType.isBoolean()) {
+      const unionTypes = propType.getUnionTypes();
+      const type = Array.from(
+        new Set(unionTypes.map((union) => getTypeFlagsName(union.getFlags().valueOf())))
+      );
+      return {
+        name: propName,
+        type,
+        isOptional: prop.isOptional(),
+        value: unionTypes.map(
+          (union) => removeQuotesAndWrapWithDoubleQuotes(union.getText())
+        )
+      };
+    }
+    return {
+      name: propName,
+      type: [prop.getValueDeclaration().getType().getText()],
+      isOptional: prop.isOptional(),
+      value: []
+    };
+  });
+  return {
+    propsPattern,
+    propTypes
+  };
+}
+var errorDefinition = {
+  // Common
+  EC00: {
+    title: "Unknown error",
+    isCustomDetail: true
+  },
+  EC01: {
+    title: "Not yet supported",
+    detail: "This preset name is included in the preset bust not yet supported. Please wait for support.",
+    isCustomDetail: false
+  },
+  EC02: {
+    title: "Preset is not supported",
+    isCustomDetail: true
+  },
+  EC03: {
+    title: "Unable to get component name or file path correctly.",
+    detail: "Please check the file path and try again.",
+    isCustomDetail: false
+  },
+  EC04: {
+    title: "Could not find argTypes",
+    detail: "Error in genReactStoryFile.",
+    isCustomDetail: false
+  },
+  EC05: {
+    title: "Could not find meta",
+    isCustomDetail: true
+  },
+  EC06: {
+    title: "Could not find initializer",
+    detail: "Could not get initializer of ObjectLiteralExpression.",
+    isCustomDetail: false
+  },
+  EC07: {
+    title: "Could not find component",
+    isCustomDetail: true
+  },
+  EC08: {
+    title: "Could not scan directory",
+    isCustomDetail: true
+  },
+  EC09: {
+    title: "Reading directory failed",
+    isCustomDetail: true
+  },
+  EC10: {
+    title: "Could not get property from stories",
+    isCustomDetail: true
+  },
+  EC11: {
+    title: "File is defective.",
+    detail: "An error occurred during abstract syntax tree parsing.\nPlease check your file for problems.",
+    isCustomDetail: false
+  },
+  // Lit
+  EL01: {
+    title: "Failed to save file",
+    isCustomDetail: true
+  }
+};
+var throwErr = (params) => {
+  const { errorCode, detail } = params;
+  const detailText = errorDefinition[errorCode].isCustomDetail ? detail : errorDefinition[errorCode].detail;
+  console.error(`[ASG:${errorCode}] ${errorDefinition[errorCode].title}
+${detailText}`);
+};
+async function genReactStoryFile({
+  componentName,
+  fileBase,
+  fileName,
+  filePrefixExt,
+  path: path42,
+  fileExt,
+  relativeSourceFilePath,
+  sourceFile,
+  prettierConfigPath,
+  storiesFolder
+}) {
+  if (!componentName || !fileBase) {
+    throwErr({
+      errorCode: "EC03"
+    });
+    return;
+  }
+  const { propTypes } = getReactPropTypes({
+    sourceFile,
+    componentName
+  });
+  const pascalComponentName = pascalCase(componentName);
+  if (!propTypes) {
+    throwErr({
+      errorCode: "EC04"
+    });
+    return;
+  }
+  const defaultExportDeclaration = sourceFile.getExportedDeclarations();
+  let isDefaultExportComponent = false;
+  defaultExportDeclaration.forEach((declaration, exportName) => {
+    if (exportName === "default") {
+      const defaultExportName = declaration[0]?.getSymbol()?.getName();
+      isDefaultExportComponent = defaultExportName === pascalComponentName;
+    }
+  });
+  const pathToComponent = storiesFolder ? "../" : "./";
+  const initialCode = `
+import type { Meta, StoryObj } from "@storybook/react";
+
+${isDefaultExportComponent ? `import ${pascalComponentName} from "${pathToComponent}${fileName}${filePrefixExt || ""}";` : `import { ${pascalComponentName} } from "${pathToComponent}${fileName}${filePrefixExt || ""}";`}
+
+const meta: Meta<typeof ${pascalComponentName}> = {
+  title: "components/${pascalComponentName}",
+  component: (args) => <${componentName} {...args} />,
+  tags: ["autodocs"],
+  args: {},
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};
+`;
+  const componentCode = `${pascalComponentName}`;
+  const args = {};
+  propTypes.forEach((prop) => {
+    if (prop.isOptional) return args[prop.name] = "undefined";
+    let value = prop.value.length > 0 ? `"${prop.value[0]}"` : "undefined";
+    if (prop.type.includes("boolean")) value = true;
+    args[prop.name] = value;
+  });
+  const argTypes = {};
+  propTypes.forEach((prop) => {
+    if (prop.type[0] === "boolean") {
+      return argTypes[prop.name] = {
+        control: "boolean"
+      };
+    }
+    if (prop.type[0] === "object") {
+      return argTypes[prop.name] = {
+        control: "object"
+      };
+    }
+    if (prop.value.length > 1) {
+      return argTypes[prop.name] = {
+        control: "select",
+        options: prop.value
+      };
+    } else {
+      if (prop.type[0] === "string") {
+        return argTypes[prop.name] = {
+          control: "text"
+        };
+      }
+      if (prop.type[0] === "number") {
+        return argTypes[prop.name] = {
+          control: "number"
+        };
+      }
+    }
+  });
+  return {
+    fileOptions: {
+      componentName,
+      fileBase,
+      fileName,
+      filePrefixExt,
+      path: path42,
+      fileExt,
+      relativeSourceFilePath,
+      sourceFile,
+      prettierConfigPath
+    },
+    generateOptions: {
+      fileExt: ".stories.tsx",
+      initialCode,
+      meta: {
+        component: componentCode,
+        args,
+        argTypes
+      }
+    }
+  };
+}
+function createLightProject() {
+  return new Project({
+    compilerOptions: { allowJs: true },
+    useInMemoryFileSystem: true
+  });
+}
+var resolvedPrettierConfig = null;
+async function getPrettierConfig(prettierConfigPath) {
+  if (resolvedPrettierConfig) return resolvedPrettierConfig;
+  resolvedPrettierConfig = prettierConfigPath ? await prettier.resolveConfig(prettierConfigPath) : {
+    semi: true,
+    trailingComma: "all",
+    singleQuote: false,
+    printWidth: 80,
+    tabWidth: 2,
+    endOfLine: "lf"
+  };
+  return resolvedPrettierConfig ?? {};
+}
+async function genStoryFile({
+  options,
+  id,
+  projectRootDir
+}) {
+  if (id.includes(".stories")) return;
+  const {
+    fileBase,
+    fileName,
+    fileExt,
+    filePrefixExt,
+    componentName,
+    relativeSourceFilePath
+  } = getComponentInfo(id, projectRootDir);
+  try {
+    const sourceCode = fs.readFileSync(id, "utf-8");
+    const sourceProject = createLightProject();
+    const sourceFile = sourceProject.createSourceFile(fileBase || "temp.tsx", sourceCode);
+    let genStoryFileOptions;
+    if (options.preset === "react") {
+      genStoryFileOptions = await genReactStoryFile({
+        componentName,
+        fileBase,
+        fileName,
+        path: id,
+        fileExt,
+        filePrefixExt,
+        relativeSourceFilePath,
+        sourceFile,
+        prettierConfigPath: options.prettierConfigPath,
+        storiesFolder: options.storiesFolder
+      });
+    } else {
+      throwErr({
+        errorCode: "EC02",
+        detail: `Preset ${options.preset} is not supported in this fork. Only "react" is supported.`
+      });
+      return;
+    }
+    if (!genStoryFileOptions) {
+      return;
+    }
+    const storiesFilePath = genStoryFileOptions.fileOptions.path.replace(
+      genStoryFileOptions.fileOptions.filePrefixExt ? genStoryFileOptions.fileOptions.filePrefixExt : `${genStoryFileOptions.fileOptions.fileExt}`,
+      genStoryFileOptions.generateOptions.fileExt
+    );
+    let storiesFolderPath = "";
+    let storiesFilePathWithStoriesFolder = "";
+    if (options.storiesFolder) {
+      const splitStoriesFilePath = storiesFilePath.split("/");
+      const fileNameWithStoriesFolder = `${options.storiesFolder}/${splitStoriesFilePath[splitStoriesFilePath.length - 1]}`;
+      storiesFilePathWithStoriesFolder = storiesFilePath.replace(
+        `${genStoryFileOptions.fileOptions.fileName}${genStoryFileOptions.generateOptions.fileExt}`,
+        fileNameWithStoriesFolder
+      );
+      storiesFolderPath = storiesFilePath.replace(
+        `${genStoryFileOptions.fileOptions.fileName}${genStoryFileOptions.generateOptions.fileExt}`,
+        options.storiesFolder || ""
+      );
+    }
+    const storiesFilePathFinal = options.storiesFolder ? storiesFilePathWithStoriesFolder : storiesFilePath;
+    const storyExists = fs.existsSync(storiesFilePathFinal);
+    if (!storyExists) {
+      if (options.storiesFolder) {
+        fs.mkdirSync(storiesFolderPath, { recursive: true });
+      }
+      fs.writeFileSync(
+        storiesFilePathFinal,
+        genStoryFileOptions.generateOptions.initialCode
+      );
+    }
+    const storiesProject = new Project();
+    const storiesSourceFile = storiesProject.addSourceFileAtPath(storiesFilePathFinal);
+    const meta = storiesSourceFile.getVariableDeclaration("meta");
+    if (!meta || !meta.getInitializerIfKind(SyntaxKind.ObjectLiteralExpression)) {
+      throwErr({
+        errorCode: "EC05",
+        detail: `Could not find meta in file ${storiesSourceFile.getFilePath()}`
+      });
+      return;
+    }
+    const initializer = meta.getInitializerIfKindOrThrow(
+      SyntaxKind.ObjectLiteralExpression
+    );
+    if (!initializer) {
+      throwErr({ errorCode: "EC06" });
+      return;
+    }
+    if (genStoryFileOptions.generateOptions.meta.render) {
+      let renderProperty = initializer.getProperty("render");
+      while (!renderProperty) {
+        initializer.addPropertyAssignment({
+          name: "render",
+          initializer: "() => {}"
+        });
+        renderProperty = initializer.getProperty("render");
+      }
+      renderProperty.set({
+        initializer: genStoryFileOptions.generateOptions.meta.render
+      });
+    }
+    if (genStoryFileOptions.generateOptions.meta.component) {
+      let componentProperty = initializer.getProperty("component");
+      while (!componentProperty) {
+        initializer.addPropertyAssignment({
+          name: "component",
+          initializer: "null"
+        });
+        componentProperty = initializer.getProperty("component");
+      }
+      componentProperty.set({
+        initializer: genStoryFileOptions.generateOptions.meta.component
+      });
+    }
+    if (genStoryFileOptions.generateOptions.meta.args) {
+      let argsProperty = initializer.getProperty("args");
+      while (!argsProperty) {
+        initializer.addPropertyAssignment({
+          name: "args",
+          initializer: "{}"
+        });
+        argsProperty = initializer.getProperty("args");
+      }
+      const argText = Object.entries(genStoryFileOptions.generateOptions.meta.args).map((x) => x.join(":")).join(", ");
+      argsProperty.set({ initializer: `{ ${argText} }` });
+    }
+    if (genStoryFileOptions.generateOptions.meta.argTypes) {
+      let argTypesProperty = initializer.getProperty("argTypes");
+      while (!argTypesProperty) {
+        initializer.addPropertyAssignment({
+          name: "argTypes",
+          initializer: "{}"
+        });
+        argTypesProperty = initializer.getProperty("argTypes");
+      }
+      const argTypesText = JSON.stringify(
+        genStoryFileOptions.generateOptions.meta.argTypes,
+        null,
+        ""
+      );
+      argTypesProperty.set({ initializer: `${argTypesText}` });
+    }
+    await storiesSourceFile.save();
+    const fileContent = fs.readFileSync(storiesFilePathFinal, "utf-8");
+    const config = await getPrettierConfig(
+      genStoryFileOptions.fileOptions.prettierConfigPath
+    );
+    const formattedContent = await prettier.format(fileContent, {
+      ...config,
+      parser: "typescript"
+    });
+    fs.writeFileSync(storiesFilePathFinal, formattedContent);
+  } catch (err) {
+    console.warn(`[ASG] Failed to generate story for ${id}:`, err);
+  }
+}
+async function getAllFilePaths({
+  patterns,
+  ignorePatterns,
+  projectRootDir
+}) {
+  const fullPatterns = patterns.map(
+    (p) => path3.join(projectRootDir, p).replace(/\\/g, "/")
+  );
+  const ignoreFullPatterns = ignorePatterns?.map(
+    (p) => path3.join(projectRootDir, p).replace(/\\/g, "/")
+  );
+  const filePaths = await glob(fullPatterns, {
+    ignore: ignoreFullPatterns,
+    nodir: true
+  });
+  return filePaths.map((p) => p.replace(/\\/g, "/"));
+}
+var PLUGIN_NAME = "auto-story-generator";
+var DEFAULT_BATCH_SIZE = 20;
+var DEFAULT_CONCURRENCY = 4;
+var mtimeCache = /* @__PURE__ */ new Map();
+function hasFileChanged(filePath) {
+  try {
+    const stat = fs.statSync(filePath);
+    const mtime = stat.mtimeMs;
+    const cached = mtimeCache.get(filePath);
+    if (cached === mtime) return false;
+    mtimeCache.set(filePath, mtime);
+    return true;
+  } catch {
+    mtimeCache.delete(filePath);
+    return true;
+  }
+}
+function getStoryFilePath(filePath, storiesFolder) {
+  const parsed = path3.parse(filePath);
+  const storyName = `${parsed.name}.stories.tsx`;
+  if (storiesFolder) {
+    return path3.join(parsed.dir, storiesFolder, storyName);
+  }
+  return path3.join(parsed.dir, storyName);
+}
+async function processBatch(files, options, projectRootDir, concurrency) {
+  let processed = 0;
+  for (let i = 0; i < files.length; i += concurrency) {
+    const chunk = files.slice(i, i + concurrency);
+    await Promise.all(
+      chunk.map(async (filePath) => {
+        await genStoryFile({
+          options,
+          id: filePath,
+          projectRootDir
+        });
+        processed++;
+      })
+    );
+  }
+  return processed;
+}
+function createAutoStoryPlugin(options) {
+  const projectRootDir = (options.projectRoot ?? process.cwd()).replace(/\\/g, "/");
+  const batchSize = options.batchSize ?? DEFAULT_BATCH_SIZE;
+  const concurrency = options.concurrency ?? DEFAULT_CONCURRENCY;
+  return {
+    name: PLUGIN_NAME,
+    async buildStart() {
+      if (!options.isGenerateStoriesFileAtBuild) return;
+      const patterns = options.imports ?? ["src/**/*.tsx"];
+      const ignorePatterns = options.ignores ?? [];
+      console.log(`[ASG] Scanning for components: ${patterns.join(", ")}`);
+      const allFiles = await getAllFilePaths({
+        patterns,
+        ignorePatterns,
+        projectRootDir
+      });
+      const filesToProcess = allFiles.filter((filePath) => {
+        if (filePath.includes(".stories")) return false;
+        if (options.cacheEnabled !== false) {
+          const storyPath = getStoryFilePath(filePath, options.storiesFolder);
+          const storyExists = fs.existsSync(storyPath);
+          if (!hasFileChanged(filePath) && storyExists) return false;
+        }
+        return true;
+      });
+      console.log(
+        `[ASG] Found ${allFiles.length} files, ${filesToProcess.length} need processing`
+      );
+      let totalProcessed = 0;
+      for (let i = 0; i < filesToProcess.length; i += batchSize) {
+        const batch = filesToProcess.slice(i, i + batchSize);
+        const count = await processBatch(batch, options, projectRootDir, concurrency);
+        totalProcessed += count;
+        if (options.onProgress) {
+          options.onProgress(totalProcessed, filesToProcess.length);
+        }
+        if (i + batchSize < filesToProcess.length) {
+          await new Promise((r) => setTimeout(r, 0));
+        }
+      }
+      console.log(`[ASG] Generated stories for ${totalProcessed} components`);
+    },
+    async watchChange(id, change) {
+      if (change.event === "delete") return;
+      const normalizedId = id.replace(/\\/g, "/");
+      if (options.imports) {
+        const relativePath = normalizedId.replace(projectRootDir, "").replace(/^\//, "");
+        const matches = options.imports.some(
+          (pattern) => minimatch(relativePath, pattern)
+        );
+        if (!matches) return;
+      }
+      if (options.ignores) {
+        const relativePath = normalizedId.replace(projectRootDir, "").replace(/^\//, "");
+        const ignored = options.ignores.some(
+          (pattern) => minimatch(relativePath, pattern)
+        );
+        if (ignored) return;
+      }
+      mtimeCache.delete(normalizedId);
+      await genStoryFile({
+        options,
+        id: normalizedId,
+        projectRootDir
+      });
+    }
+  };
+}
+var index_default = { vite: createAutoStoryPlugin };
 var FIXED_MARKER = "// @onlook-fixed";
 var parser = withDefaultConfig({
   shouldExtractLiteralValuesFromEnum: true,
@@ -25,12 +617,12 @@ var parser = withDefaultConfig({
   }
 });
 function resolveComponentPath(storyFilePath) {
-  const dir = path6.dirname(storyFilePath);
-  const parentDir = path6.dirname(dir);
-  const storyName = path6.basename(storyFilePath);
+  const dir = path3.dirname(storyFilePath);
+  const parentDir = path3.dirname(dir);
+  const storyName = path3.basename(storyFilePath);
   const componentName = storyName.replace(".stories.tsx", ".tsx");
-  const componentPath = path6.join(parentDir, componentName);
-  return fs5.existsSync(componentPath) ? componentPath : null;
+  const componentPath = path3.join(parentDir, componentName);
+  return fs.existsSync(componentPath) ? componentPath : null;
 }
 function generateArgTypes(componentPath) {
   try {
@@ -71,7 +663,7 @@ function generateArgTypes(componentPath) {
 }
 function enrichStoryFile(storyFilePath) {
   try {
-    const content = fs5.readFileSync(storyFilePath, "utf-8");
+    const content = fs.readFileSync(storyFilePath, "utf-8");
     if (content.includes(FIXED_MARKER)) {
       return;
     }
@@ -90,8 +682,8 @@ function enrichStoryFile(storyFilePath) {
 export default meta;`
     );
     if (enriched !== content) {
-      fs5.writeFileSync(storyFilePath, enriched);
-      console.log(`[AutoStories] Enriched ${path6.basename(storyFilePath)} with argTypes`);
+      fs.writeFileSync(storyFilePath, enriched);
+      console.log(`[AutoStories] Enriched ${path3.basename(storyFilePath)} with argTypes`);
     }
   } catch (err) {
     console.error(`[AutoStories] Failed to enrich story: ${storyFilePath}`, err);
@@ -119,7 +711,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path6.relative(root, filepath);
+      const relativePath = path3.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -156,9 +748,9 @@ function componentLocPlugin(options = {}) {
     }
   };
 }
-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 CACHE_DIR = path3.join(process.cwd(), ".storybook-cache");
+var SCREENSHOTS_DIR = path3.join(CACHE_DIR, "screenshots");
+var MANIFEST_PATH = path3.join(CACHE_DIR, "manifest.json");
 var VIEWPORT_WIDTH = 1920;
 var VIEWPORT_HEIGHT = 1080;
 var MIN_COMPONENT_WIDTH = 420;
@@ -166,30 +758,30 @@ var MIN_COMPONENT_HEIGHT = 280;
 
 // src/utils/fileSystem/fileSystem.ts
 function ensureCacheDirectories() {
-  if (!fs5.existsSync(CACHE_DIR)) {
-    fs5.mkdirSync(CACHE_DIR, { recursive: true });
+  if (!fs.existsSync(CACHE_DIR)) {
+    fs.mkdirSync(CACHE_DIR, { recursive: true });
   }
-  if (!fs5.existsSync(SCREENSHOTS_DIR)) {
-    fs5.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
+  if (!fs.existsSync(SCREENSHOTS_DIR)) {
+    fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
   }
 }
 function computeFileHash(filePath) {
-  if (!fs5.existsSync(filePath)) {
+  if (!fs.existsSync(filePath)) {
     return "";
   }
-  const content = fs5.readFileSync(filePath, "utf-8");
+  const content = fs.readFileSync(filePath, "utf-8");
   return crypto.createHash("sha256").update(content).digest("hex");
 }
 function loadManifest() {
-  if (fs5.existsSync(MANIFEST_PATH)) {
-    const content = fs5.readFileSync(MANIFEST_PATH, "utf-8");
+  if (fs.existsSync(MANIFEST_PATH)) {
+    const content = fs.readFileSync(MANIFEST_PATH, "utf-8");
     return JSON.parse(content);
   }
   return { stories: {} };
 }
 function saveManifest(manifest) {
   ensureCacheDirectories();
-  fs5.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
+  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
 }
 function updateManifest(storyId, sourcePath, fileHash, boundingBox) {
   const manifest = loadManifest();
@@ -215,8 +807,8 @@ async function getBrowser() {
   return browser;
 }
 function getScreenshotPath(storyId, theme) {
-  const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
-  return path6.join(storyDir, `${theme}.png`);
+  const storyDir = path3.join(SCREENSHOTS_DIR, storyId);
+  return path3.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();
@@ -303,9 +895,9 @@ async function captureScreenshotBuffer(storyId, theme, width = VIEWPORT_WIDTH, h
 async function generateScreenshot(storyId, theme, storybookUrl = "http://localhost:6006", timeoutMs = 3e4) {
   try {
     ensureCacheDirectories();
-    const storyDir = path6.join(SCREENSHOTS_DIR, storyId);
-    if (!fs5.existsSync(storyDir)) {
-      fs5.mkdirSync(storyDir, { recursive: true });
+    const storyDir = path3.join(SCREENSHOTS_DIR, storyId);
+    if (!fs.existsSync(storyDir)) {
+      fs.mkdirSync(storyDir, { recursive: true });
     }
     const screenshotPath = getScreenshotPath(storyId, theme);
     const { buffer, boundingBox } = await captureScreenshotBuffer(
@@ -316,7 +908,7 @@ async function generateScreenshot(storyId, theme, storybookUrl = "http://localho
       storybookUrl,
       timeoutMs
     );
-    fs5.writeFileSync(screenshotPath, buffer);
+    fs.writeFileSync(screenshotPath, buffer);
     return { path: screenshotPath, boundingBox };
   } catch (error) {
     console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
@@ -343,7 +935,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path6.basename(filePath);
+  const fileName = path3.basename(filePath);
   return Object.values(cachedIndex.entries).filter((entry) => entry.type === "story" && entry.importPath.endsWith(fileName)).map((entry) => entry.id);
 }
 async function regenerateScreenshotsForFiles(files) {
@@ -432,18 +1024,6 @@ 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();
@@ -515,124 +1095,9 @@ 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 = path6.join(process.cwd(), ".storybook-cache", "manifest.json");
+    const manifestPath = path3.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}`, {
@@ -649,7 +1114,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
       });
       return response.json();
     }).then((indexData) => {
-      const manifest = fs5.existsSync(manifestPath) ? JSON.parse(fs5.readFileSync(manifestPath, "utf-8")) : { stories: {} };
+      const manifest = fs.existsSync(manifestPath) ? JSON.parse(fs.readFileSync(manifestPath, "utf-8")) : { stories: {} };
       const defaultBoundingBox = { width: 1920, height: 1080 };
       for (const [storyId, entry] of Object.entries(indexData.entries || {})) {
         const manifestEntry = manifest.stories?.[storyId];
@@ -717,7 +1182,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path6.join(
+    const screenshotPath = path3.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -726,11 +1191,11 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     const storyId = urlParts[0];
     const themeFile = urlParts[1];
     const theme = themeFile?.replace(".png", "");
-    if (fs5.existsSync(screenshotPath)) {
+    if (fs.existsSync(screenshotPath)) {
       res.setHeader("Content-Type", "image/png");
       res.setHeader("Access-Control-Allow-Origin", "*");
       res.setHeader("Cache-Control", "public, max-age=3600");
-      fs5.createReadStream(screenshotPath).pipe(res);
+      fs.createReadStream(screenshotPath).pipe(res);
       return;
     }
     if (storyId && theme && (theme === "light" || theme === "dark")) {
@@ -738,16 +1203,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path6.join(
+        const storyDir = path3.join(
           process.cwd(),
           ".storybook-cache",
           "screenshots",
           storyId
         );
-        if (!fs5.existsSync(storyDir)) {
-          fs5.mkdirSync(storyDir, { recursive: true });
+        if (!fs.existsSync(storyDir)) {
+          fs.mkdirSync(storyDir, { recursive: true });
         }
-        fs5.writeFileSync(screenshotPath, buffer);
+        fs.writeFileSync(screenshotPath, buffer);
         res.setHeader("Content-Type", "image/png");
         res.setHeader("Access-Control-Allow-Origin", "*");
         res.setHeader("Cache-Control", "public, max-age=3600");
@@ -830,8 +1295,8 @@ function storybookOnlookPlugin(options = {}) {
   };
   const plugins = [componentLocPlugin(), mainPlugin];
   if (options.autoStories !== false) {
-    discoveryConfig.imports = options.autoStories ?? ["src/**/*.tsx"];
-    discoveryConfig.ignores = options.autoStoriesIgnore ?? [
+    const imports = options.autoStories ?? ["src/**/*.tsx"];
+    const ignores = options.autoStoriesIgnore ?? [
       "src/**/*.stories.tsx",
       "src/**/*.stories.ts",
       "src/**/*.test.tsx",
@@ -841,10 +1306,27 @@ function storybookOnlookPlugin(options = {}) {
       "node_modules/**",
       "**/.onlook-stories/**"
     ];
-    console.log("[STORYBOOK_PLUGIN] Component discovery configured", {
-      imports: discoveryConfig.imports,
-      ignores: discoveryConfig.ignores
+    console.log("[STORYBOOK_PLUGIN] Auto-story generation enabled", {
+      imports,
+      ignores,
+      storiesFolder: AUTO_STORIES_FOLDER
     });
+    try {
+      plugins.push(
+        index_default.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.2",
+  "version": "0.4.0-beta.3",
   "type": "module",
   "bin": {
     "onlook-storybook": "./dist/cli/index.js"
@@ -37,9 +37,12 @@
     "@babel/traverse": "^7.26.9",
     "@babel/types": "^7.26.9",
     "@drizzle-team/brocli": "^0.11.0",
-    "glob": "^11.0.0",
+    "glob": "^10.3.10",
+    "minimatch": "^9.0.3",
     "playwright": "^1.52.0",
-    "react-docgen-typescript": "^2.4.0"
+    "prettier": "^3.2.5",
+    "react-docgen-typescript": "^2.4.0",
+    "ts-morph": "^21.0.1"
   },
   "devDependencies": {
     "@onbook/tsconfig": "workspace:*",