vibe-design-system 2.5.21 → 2.5.23

package/package.json

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

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

@@ -478,22 +478,36 @@ const REACTNODE_PLACEHOLDER_TEXT = {
   children: "Example content",
 };
 
-/** Recursive list of .tsx file paths under dir (relative to dir). */
-function getAllTsxUnderDir(dir) {
+/** Recursive list of .tsx/.jsx file paths under dir (relative to dir). Index.tsx / index.tsx first for deterministic "first usage". */
+function getAllTsxJsxUnderDir(dir) {
   if (!fs.existsSync(dir)) return [];
   const out = [];
   const entries = fs.readdirSync(dir, { withFileTypes: true });
   for (const e of entries) {
     const full = path.join(dir, e.name);
     if (e.isDirectory()) {
-      out.push(...getAllTsxUnderDir(full).map((r) => path.join(e.name, r)));
-    } else if (e.isFile() && e.name.endsWith(".tsx")) {
+      out.push(...getAllTsxJsxUnderDir(full).map((r) => path.join(e.name, r)));
+    } else if (e.isFile() && (e.name.endsWith(".tsx") || e.name.endsWith(".jsx"))) {
       out.push(e.name);
     }
   }
+  out.sort((a, b) => {
+    const baseA = path.basename(a, path.extname(a));
+    const baseB = path.basename(b, path.extname(b));
+    const isIndexA = baseA === "Index" || baseA === "index";
+    const isIndexB = baseB === "Index" || baseB === "index";
+    if (isIndexA && !isIndexB) return -1;
+    if (!isIndexA && isIndexB) return 1;
+    return a.localeCompare(b);
+  });
   return out;
 }
 
+/** @deprecated Use getAllTsxJsxUnderDir. Kept for compatibility. */
+function getAllTsxUnderDir(dir) {
+  return getAllTsxJsxUnderDir(dir);
+}
+
 /** Extract prop="value" and prop='value' and prop={"value"} from JSX tag content. Returns { propName: "value", ... }. */
 function extractPropsFromJsxTagContent(tagContent) {
   const props = {};
@@ -546,7 +560,7 @@ function buildMockArrayItems(componentSource, itemTypeName, propName) {
   return items;
 }
 
-/** Find first real usage of component in src/pages or src/app; return { propName: "literalValue", ... } or null. */
+/** Find first real usage of component in src/pages or src/app (Index.tsx preferred); return { propName: "literalValue", ... } or null. */
 function findComponentUsageInPages(componentName, projectRoot) {
   const srcDir = path.join(projectRoot, "src");
   const pagesDir = path.join(srcDir, "pages");
@@ -557,7 +571,7 @@ function findComponentUsageInPages(componentName, projectRoot) {
   const escapedName = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   const tagOpenRe = new RegExp(`<${escapedName}\\s+([\\s\\S]*?)\\s*\\/?>`, "m");
   for (const dir of dirs) {
-    const files = getAllTsxUnderDir(dir);
+    const files = getAllTsxJsxUnderDir(dir);
     for (const rel of files) {
       const fullPath = path.join(dir, rel);
       try {
@@ -596,9 +610,10 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       const name = p.name;
       const required = p.required === true;
       if (/ReactNode|React\.ReactNode/.test(type)) {
-        const text = REACTNODE_PLACEHOLDER_TEXT[name] || componentPlaceholders[name] || "Content";
-        argLines.push(`    ${name}: React.createElement('p', null, ${JSON.stringify(text)}),`);
-        needReact = true;
+        const text = fromPages[name] != null && typeof fromPages[name] === "string"
+          ? fromPages[name]
+          : (REACTNODE_PLACEHOLDER_TEXT[name] || componentPlaceholders[name] || "Content");
+        argLines.push(`    ${name}: ${JSON.stringify(text)},`);
         added.add(name);
         continue;
       }