vibe-design-system 2.4.10 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.4.10",
+  "version": "2.5.0",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {

package/vds-core-template/scan.mjs

@@ -517,6 +517,7 @@ function extractComponentSuggestions() {
         byPattern.set(raw, {
           count: 0,
           files: new Set(),
+          tagName,
           snippet: `<${tagName} className="${raw}">...</${tagName}>`,
         });
       }
@@ -527,14 +528,15 @@ function extractComponentSuggestions() {
   }
 
   const suggestions = [];
-  for (const [pattern, { count, files, snippet }] of byPattern.entries()) {
+  for (const [pattern, { count, files, snippet, tagName }] of byPattern.entries()) {
     if (count < 2) continue;
     const suggestedName = suggestNameFromPattern(pattern);
     suggestions.push({
       suggestedName,
+      tagName: tagName || "div",
+      pattern,
       occurrences: count,
       foundIn: [...files].sort(),
-      pattern,
       snippet,
       reason: `Same className cluster appears ${count} times`,
     });
@@ -542,6 +544,51 @@ function extractComponentSuggestions() {
   return suggestions;
 }
 
+const VDS_GENERATED_DIR = path.join(COMPONENTS_DIR, "vds-generated");
+
+/** Write extracted components to src/components/vds-generated/*.tsx and return component entries for output. */
+function writeVdsGeneratedComponents(suggestions) {
+  if (!Array.isArray(suggestions) || suggestions.length === 0) return [];
+  if (!fs.existsSync(VDS_GENERATED_DIR)) fs.mkdirSync(VDS_GENERATED_DIR, { recursive: true });
+  const usedNames = new Set();
+  const entries = [];
+  for (let i = 0; i < suggestions.length; i++) {
+    const s = suggestions[i];
+    let baseName = s.suggestedName.replace(/\s+/g, "");
+    if (!baseName) baseName = "Extracted";
+    let fileName = baseName + ".tsx";
+    if (usedNames.has(fileName)) {
+      fileName = baseName + String(i + 1) + ".tsx";
+    }
+    usedNames.add(fileName);
+    const componentName = fileName.replace(/\.tsx$/, "");
+    const tagName = s.tagName || "div";
+    const className = s.pattern || "";
+    const relPath = "vds-generated/" + fileName;
+    const fullPath = path.join(COMPONENTS_DIR, relPath);
+    const content = `import * as React from "react";
+
+export function ${componentName}({ children }: { children?: React.ReactNode }) {
+  return (
+    <${tagName} className={\`${className.replace(/`/g, "\\`").replace(/\$/g, "\\$")}\`}>
+      {children ?? null}
+    </${tagName}>
+  );
+}
+`;
+    fs.writeFileSync(fullPath, content, "utf-8");
+    entries.push({
+      file: relPath,
+      name: componentName.replace(/([A-Z])/g, " $1").trim(),
+      group: "VDS Generated",
+      category: "Extracted",
+      description: "Auto-extracted from repeated className patterns.",
+      tokens: (className || "").split(/\s+/).filter(Boolean),
+    });
+  }
+  return entries;
+}
+
 function extractTailwindTokens(content) {
   const tokens = new Set();
   const patterns = [
@@ -942,6 +989,8 @@ function scan() {
   foundations.icons = extractLucideIconsUsed(SRC_DIR);
   foundations.brand = { assets: extractBrandAssets() };
   const componentSuggestions = extractComponentSuggestions();
+  const vdsGeneratedEntries = writeVdsGeneratedComponents(componentSuggestions);
+  results.push(...vdsGeneratedEntries);
   const output = {
     branch: getGitBranch(),
     engineer: getGitEngineer(),

package/vds-core-template/story-generator.mjs

@@ -536,9 +536,9 @@ function buildStoryFileContent(comp) {
   const fileNoExt = comp.file.replace(/\.(tsx|jsx)$/, "");
   let importPath = "";
   if (fileNoExt.startsWith("pages/")) {
-    importPath = "@/" + fileNoExt;
+    importPath = "../" + fileNoExt; // Sonuç: "../pages/Home" olacak
   } else {
-    importPath = "@/components/" + fileNoExt;
+    importPath = "../components/" + fileNoExt; // Sonuç: "../components/ui/button" olacak
   }
   const group = comp.group || "Components";
   const category = comp.category || null;
@@ -785,6 +785,40 @@ function writeFoundationsStories(foundations) {
     ].join("\n");
   fs.writeFileSync(path.join(foundationsDir, "Brand.stories.tsx"), brandContent, "utf-8");
   console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Brand.stories.tsx")));
+
+  const iconNames = Array.isArray(foundations?.icons) ? foundations.icons : [];
+  if (iconNames.length > 0) {
+    const iconsContent =
+      [
+        "import type { Meta, StoryObj } from \"@storybook/react\";",
+        "import * as Lucide from \"lucide-react\";",
+        "",
+        "const meta = { title: \"Foundations/Icons\" } satisfies Meta;",
+        "export default meta;",
+        "type Story = StoryObj;",
+        "",
+        `const iconNames = ${JSON.stringify(iconNames)};`,
+        "",
+        "export const Default: Story = {",
+        "  render: () => (",
+        "    <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(auto-fill, minmax(100px, 1fr))\", gap: 16, padding: 24 }}>",
+        "      {iconNames.map((name) => {",
+        "        const Icon = Lucide[name];",
+        "        if (!Icon) return null;",
+        "        return (",
+        "          <div key={name} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 8, padding: 12, border: \"1px solid #333\", borderRadius: 8 }}>",
+        "            <Icon size={24} />",
+        "            <span style={{ fontSize: 11, color: \"#888\" }}>{name}</span>",
+        "          </div>",
+        "        );",
+        "      })}",
+        "    </div>",
+        "  ),",
+        "};",
+      ].join("\n");
+    fs.writeFileSync(path.join(foundationsDir, "Icons.stories.tsx"), iconsContent, "utf-8");
+    console.log("[VDS] Wrote " + path.relative(PROJECT_ROOT, path.join(foundationsDir, "Icons.stories.tsx")));
+  }
 }
 
 function writeComponentSuggestionsStory(componentSuggestions) {