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

package/dist/index.js

@@ -1,7 +1,10 @@
-import fs5, { existsSync } from 'fs';
-import path, { dirname, join, relative } from 'path';
+import fs, { existsSync } from 'fs';
+import path3, { dirname, join, relative } from 'path';
 import { fileURLToPath } from 'url';
-import autoStoryGenerator from '@takuma-ru/auto-story-generator';
+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';
@@ -11,6 +14,599 @@ import crypto from 'crypto';
 import { chromium } from 'playwright';
 
 // 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,
@@ -21,12 +617,12 @@ var parser = withDefaultConfig({
   }
 });
 function resolveComponentPath(storyFilePath) {
-  const dir = path.dirname(storyFilePath);
-  const parentDir = path.dirname(dir);
-  const storyName = path.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 = path.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 {
@@ -67,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;
     }
@@ -86,8 +682,8 @@ function enrichStoryFile(storyFilePath) {
 export default meta;`
     );
     if (enriched !== content) {
-      fs5.writeFileSync(storyFilePath, enriched);
-      console.log(`[AutoStories] Enriched ${path.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);
@@ -115,7 +711,7 @@ function componentLocPlugin(options = {}) {
         sourceFilename: filepath
       });
       let mutated = false;
-      const relativePath = path.relative(root, filepath);
+      const relativePath = path3.relative(root, filepath);
       traverse(ast, {
         JSXElement(nodePath) {
           const opening = nodePath.node.openingElement;
@@ -152,9 +748,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 = 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;
@@ -162,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();
@@ -211,8 +807,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 = 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();
@@ -299,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 = path.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(
@@ -312,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);
@@ -339,7 +935,7 @@ async function fetchStorybookIndex() {
 }
 function getStoriesForFile(filePath) {
   if (!cachedIndex) return [];
-  const fileName = path.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) {
@@ -501,7 +1097,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
   }
   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 = 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}`, {
@@ -518,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];
@@ -586,7 +1182,7 @@ var serveMetadataAndScreenshots = (req, res, next) => {
     return;
   }
   if (req.url?.startsWith("/screenshots/")) {
-    const screenshotPath = path.join(
+    const screenshotPath = path3.join(
       process.cwd(),
       ".storybook-cache",
       req.url.replace("/screenshots/", "screenshots/")
@@ -595,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")) {
@@ -607,16 +1203,16 @@ var serveMetadataAndScreenshots = (req, res, next) => {
         `[STORYBOOK_PLUGIN] Generating screenshot on-demand: ${storyId}/${theme}`
       );
       captureScreenshotBuffer(storyId, theme).then(({ buffer }) => {
-        const storyDir = path.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");
@@ -717,7 +1313,7 @@ function storybookOnlookPlugin(options = {}) {
     });
     try {
       plugins.push(
-        autoStoryGenerator.vite({
+        index_default.vite({
           preset: "react",
           imports,
           ignores,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlook/storybook-plugin",
-  "version": "0.4.0-beta.1",
+  "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",
-    "@takuma-ru/auto-story-generator": "^0.4.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:*",