vibe-design-system 2.8.0 → 2.8.2

package/package.json

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

package/vds-core-template/scan.mjs

@@ -1382,7 +1382,72 @@ function extractFoundations() {
     if (count < 1) continue;
     const name = "arbitrary-" + hex.slice(1).toLowerCase();
     colors[name] = { value: hex, source: "arbitrary-tailwind", frequency: count };
+    existingHexValues.add(hexUpper);
   }
+
+  // ── Inline style hex renkleri (style={{ color: '#AEF33F' }}) ─────────────────
+  const INLINE_STYLE_HEX = /(?:color|background(?:Color)?|borderColor|fill|stroke|outlineColor|caretColor|accentColor)\s*:\s*['"]?(#[0-9a-fA-F]{3,8})['"]?/g;
+  const inlineColors = new Map();
+  for (const file of allTsxFiles) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const match of content.matchAll(INLINE_STYLE_HEX)) {
+        const hex = match[1].toUpperCase();
+        inlineColors.set(hex, (inlineColors.get(hex) || 0) + 1);
+      }
+    } catch (_) {}
+  }
+  for (const [hex, count] of inlineColors) {
+    if (existingHexValues.has(hex)) continue;
+    const key = "inline-" + hex.slice(1).toLowerCase();
+    if (!colors[key]) {
+      colors[key] = { value: hex, source: "inline-style", frequency: count };
+      existingHexValues.add(hex);
+    }
+  }
+
+  // ── CSS dosyalarındaki hex renkler (color: #AEF33F, --brand: #AEF33F) ────────
+  const CSS_PROP_HEX = /(?:--|color|background(?:-color)?|border(?:-color)?|fill|stroke|outline(?:-color)?|accent-color|caret-color)\s*[:\s]\s*(#[0-9a-fA-F]{3,8})\b/gi;
+  const CSS_VAR_HEX = /(--[\w-]+)\s*:\s*(#[0-9a-fA-F]{3,8})\b/g;
+  const allCssFiles = [];
+  const walkCss = (dir) => {
+    if (!fs.existsSync(dir)) return;
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, e.name);
+      if (e.isDirectory() && !["node_modules", "dist", ".next", "build"].includes(e.name)) walkCss(full);
+      else if (e.isFile() && /\.(css|scss|sass|less)$/i.test(e.name)) allCssFiles.push(full);
+    }
+  };
+  walkCss(SRC_DIR);
+  for (const name of ["index.css", "globals.css", "styles.css"]) {
+    const p = path.join(PROJECT_ROOT, name);
+    if (fs.existsSync(p)) allCssFiles.push(p);
+  }
+  for (const file of allCssFiles) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const match of content.matchAll(CSS_VAR_HEX)) {
+        const varName = match[1];
+        const hex = match[2].toUpperCase();
+        if (existingHexValues.has(hex)) continue;
+        const key = varName.replace(/^--/, "css-");
+        if (!colors[key]) {
+          colors[key] = { value: hex, source: "css-variable", cssVar: varName };
+          existingHexValues.add(hex);
+        }
+      }
+      for (const match of content.matchAll(CSS_PROP_HEX)) {
+        const hex = match[1].toUpperCase();
+        if (existingHexValues.has(hex)) continue;
+        const key = "css-" + hex.slice(1).toLowerCase();
+        if (!colors[key]) {
+          colors[key] = { value: hex, source: "css-file", file: path.relative(PROJECT_ROOT, file) };
+          existingHexValues.add(hex);
+        }
+      }
+    } catch (_) {}
+  }
+
   // ── FALLBACK 2: Google Fonts URL ──────────────────────────
   const GFONTS_PATTERN = /family=([A-Za-z+]+)(?::.*?)?(?:&|$)/g;
   const fontFileCandidates = [

package/vds-core-template/setup-storybook-providers.mjs

@@ -170,6 +170,40 @@ function getPreviewPath(projectRoot) {
   return null;
 }
 
+// React Router hooks that require a Router wrapper in Storybook
+const ROUTER_HOOKS = new Set([
+  "useLocation", "useNavigate", "useParams", "useSearchParams",
+  "useMatch", "useHref", "useResolvedPath", "useOutlet", "useOutletContext",
+  "useMatches", "useRouteError", "useNavigation", "useRevalidator",
+]);
+
+function detectRouterPackage(projectRoot) {
+  const pkgPath = path.join(projectRoot, "package.json");
+  if (!fs.existsSync(pkgPath)) return null;
+  try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+    if (deps["react-router-dom"]) return "react-router-dom";
+    if (deps["react-router"]) return "react-router";
+  } catch (_) {}
+  return null;
+}
+
+function projectUsesRouterHooks(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  if (!fs.existsSync(srcDir)) return false;
+  const files = getAllSourceFiles(srcDir, srcDir).map((r) => path.join(projectRoot, "src", r));
+  for (const file of files) {
+    try {
+      const content = fs.readFileSync(file, "utf-8");
+      for (const hook of ROUTER_HOOKS) {
+        if (new RegExp("\\b" + hook + "\\s*[(<(]").test(content)) return true;
+      }
+    } catch (_) {}
+  }
+  return false;
+}
+
 /** Detect if project uses react-dnd (useDrag, useDrop, or import from react-dnd). */
 function detectReactDnd(projectRoot) {
   const srcDir = path.join(projectRoot, "src");
@@ -231,6 +265,12 @@ function collectProvidersAndWarnings(projectRoot) {
       hooksWithoutProvider.add(hook);
     }
   }
+  // MemoryRouter: wrap components that use React Router hooks
+  const routerPackage = detectRouterPackage(projectRoot);
+  if (routerPackage && projectUsesRouterHooks(projectRoot) && !providersToAdd.some((p) => p.name === "MemoryRouter")) {
+    providersToAdd.unshift({ name: "MemoryRouter", importPath: routerPackage, props: "{ initialEntries: [\"/\"] }" });
+    console.log("[VDS] React Router tespit edildi → MemoryRouter decorator ekleniyor.");
+  }
   if (detectReactDnd(projectRoot) && !providersToAdd.some((p) => p.name === "DndProvider")) {
     providersToAdd.unshift({
       name: "DndProvider",