vibe-design-system 2.9.0 → 2.9.1

package/bin/init.js

@@ -24,6 +24,7 @@ const TEMPLATE_DIR = path.join(INSTALLER_ROOT, "vds-core-template");
 const STORYBOOK_MAIN_TS = `import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import path from "path";
+import fs from "fs";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
@@ -33,10 +34,48 @@ const config: StorybookConfig = {
     options: {},
   },
   async viteFinal(config) {
+    // Phase C2 — read tsconfig.json paths and inject as Vite aliases
+    const extraAliases = (() => {
+      try {
+        const tsConfigPaths = [
+          path.resolve(process.cwd(), "tsconfig.json"),
+          path.resolve(process.cwd(), "tsconfig.app.json"),
+        ];
+        for (const tcp of tsConfigPaths) {
+          if (!fs.existsSync(tcp)) continue;
+          const raw = JSON.parse(fs.readFileSync(tcp, "utf-8").replace(/\\/\\/[^\\n]*/g, "").replace(/,(\\s*[}\\]])/g, "$1"));
+          const paths = raw?.compilerOptions?.paths || {};
+          const aliases: Record<string, string> = {};
+          for (const [alias, targets] of Object.entries(paths) as [string, string[]][]) {
+            const cleanAlias = alias.replace(/\\/\\*$/, "");
+            const target = targets[0]?.replace(/\\/\\*$/, "") || "";
+            if (cleanAlias && target && cleanAlias !== "@") {
+              aliases[cleanAlias] = path.resolve(process.cwd(), target);
+            }
+          }
+          if (Object.keys(aliases).length > 0) return aliases;
+        }
+      } catch (_) {}
+      return {};
+    })();
     return mergeConfig(config, {
+      plugins: [
+        {
+          // Mock figma:asset/* imports — returns empty string so components render without crashing in Storybook
+          name: "vds-figma-asset-mock",
+          enforce: "pre" as const,
+          resolveId(id: string) {
+            if (id.startsWith("figma:asset")) return "\\0vds-figma-asset-mock";
+          },
+          load(id: string) {
+            if (id === "\\0vds-figma-asset-mock") return "export default '';";
+          },
+        },
+      ],
       resolve: {
         alias: {
           "@": path.resolve(process.cwd(), "src"),
+          ...extraAliases,
         },
       },
     });
@@ -338,6 +377,7 @@ export default config;
   return `import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
 import path from "path";
+import fs from "fs";
 
 const config: StorybookConfig = {
   stories: [
@@ -358,8 +398,8 @@ const config: StorybookConfig = {
           path.resolve(process.cwd(), "${srcPrefix}", "..", "tsconfig.json"),
         ];
         for (const tcp of tsConfigPaths) {
-          if (!require("fs").existsSync(tcp)) continue;
-          const raw = JSON.parse(require("fs").readFileSync(tcp, "utf-8").replace(/\/\/[^\n]*/g, "").replace(/,(\s*[}\]])/g, "$1"));
+          if (!fs.existsSync(tcp)) continue;
+          const raw = JSON.parse(fs.readFileSync(tcp, "utf-8").replace(/\/\/[^\n]*/g, "").replace(/,(\s*[}\]])/g, "$1"));
           const paths = raw?.compilerOptions?.paths || {};
           const aliases: Record<string, string> = {};
           for (const [alias, targets] of Object.entries(paths) as [string, string[]][]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "Auto-generate design systems for vibe coding projects",
   "homepage": "https://vibedesign.tech",
   "repository": {

package/vds-core-template/scan.mjs

@@ -1145,6 +1145,8 @@ function extractTailwindTokens(content) {
     /className\s*=\s*\{\s*["'`]([^"'`]+)["'`]/g,
     /cn\s*\(\s*["'`]([^"'`]+)["'`]/g,
     /cva\s*\(\s*["'`]([^"'`]+)["'`]/g,
+    // CVA variant values: captures `default: "bg-x text-y"`, `destructive: "border-x..."` etc.
+    /\b\w+\s*:\s*["'`]([a-zA-Z0-9_\-\/\s\[\]&>:%.]+)["'`]/g,
     /["'`]([a-zA-Z0-9_\-\/\s\[\]&:%.]+(?:hover|focus|active|disabled|sm|md|lg|xl|2xl|dark:)[a-zA-Z0-9_\-\/\s\[\]&:%.]*)["'`]/g,
   ];
   for (const re of patterns) {
@@ -2470,6 +2472,26 @@ function isComplexPageComponent(content) {
   return true;
 }
 
+/**
+ * Extract top-level (no indentation) PascalCase component names from a source file.
+ * Used for isPageComponent files to find internal sub-components that can be auto-exported.
+ * Only matches declarations at column 0 (^) to exclude nested arrow functions.
+ */
+function extractTopLevelInternalComponentNames(content) {
+  // Match only unindented `const ComponentName = (` or `const ComponentName: React.FC = (`
+  const re = /^(?:export\s+)?const\s+([A-Z][A-Za-z0-9]+)\s*[:=]\s*(?:\(|\bReact\.)/gm;
+  const names = [];
+  const seen = new Set();
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    if (!seen.has(m[1])) {
+      seen.add(m[1]);
+      names.push(m[1]);
+    }
+  }
+  return names;
+}
+
 function scan() {
   const relativeFiles = COMPONENTS_DIR ? getAllComponentFiles(COMPONENTS_DIR) : [];
   if (!COMPONENTS_DIR) {
@@ -2495,7 +2517,10 @@ function scan() {
     }
     const tokens = extractTailwindTokens(content);
     const isPageComponent = isComplexPageComponent(content);
-    const comp = { file: rel, name, group, category, description, tokens, ...(isPageComponent ? { isPageComponent: true } : {}) };
+    const internalComponentNames = isPageComponent
+      ? extractTopLevelInternalComponentNames(content).filter(n => n !== name)
+      : undefined;
+    const comp = { file: rel, name, group, category, description, tokens, ...(isPageComponent ? { isPageComponent: true, internalComponentNames } : {}) };
     // Phase D — CSS Module tokens
     const cssModuleTokens = extractCssModuleTokens(COMPONENTS_DIR ? path.join(COMPONENTS_DIR, rel) : null);
     if (cssModuleTokens) comp.cssModuleTokens = cssModuleTokens;

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

@@ -2208,8 +2208,11 @@ function buildStoryFileContent(comp) {
   lines.push(`  component: ComponentRef,`);
   // SECTION: no props/args → autodocs tries to render React.lazy without Suspense → useRef crash
   if (profile !== "SECTION") lines.push(`  tags: ["autodocs"],`);
-  // Center small components (VARIANT, WRAPPER, CONFIGURED, SAFE) to prevent vertical stretching
-  if (profile !== "SECTION") lines.push(`  parameters: { layout: "centered" },`);
+  // Center small components; fullscreen for complex page-level components
+  if (profile !== "SECTION") {
+    const layout = comp.isPageComponent ? "fullscreen" : "centered";
+    lines.push(`  parameters: { layout: "${layout}" },`);
+  }
   // Wrap with QueryClientProvider for components that use @tanstack/react-query hooks
   if (needsQueryClient) {
     lines.push(`  decorators: [(Story: any) => React.createElement(QueryClientProvider, { client: _queryClient }, React.createElement(Story))],`);
@@ -5200,11 +5203,8 @@ function main() {
     const storyFileName = `${componentName}.stories.tsx`;
     const storyPath = path.join(STORIES_DIR, storyFileName);
     if (SKIP_LIST.includes(componentName)) continue;
-    // Skip complex page-level components detected by scan (500+ lines, 4+ inline sub-components)
-    if (comp.isPageComponent) {
-      console.log(`[VDS] ${componentName} → skipped (complex page component — add to extraSkipList to suppress this message)`);
-      continue;
-    }
+    // Complex page-level components (500+ lines, 4+ inline sub-components) — generate fullscreen story instead of skipping
+    // (Previously skipped; now a simplified fullscreen story is generated so they appear in Storybook)
     const requiredCount = Array.isArray(comp.props) ? comp.props.filter((p) => p.required === true).length : 0;
     if (requiredCount > 3) {
       console.log(`[VDS] ${componentName} → skipped (${requiredCount} required props — too complex to auto-generate)`);
@@ -5224,6 +5224,12 @@ function main() {
     writtenCount++;
   }
 
+  // Phase I — Internal component sub-stories for isPageComponent files
+  for (const comp of components) {
+    if (!comp.isPageComponent || !Array.isArray(comp.internalComponentNames) || comp.internalComponentNames.length === 0) continue;
+    generateInternalComponentStories(comp);
+  }
+
   // Summary
   if (writtenCount === 0 && components.length > 0) {
     const hasShadcnGroup = components.some(c => {
@@ -5240,5 +5246,264 @@ function main() {
   }
 }
 
+// ─── Phase I: Internal Component Sub-Story Engine ─────────────────────────────
+/**
+ * Adds `export` to top-level internal component declarations in a source file.
+ * Non-destructive: only adds `export` keyword, no logic changes.
+ * Returns the list of names that were newly exported.
+ */
+function autoExportInternalComponents(sourceFilePath, names) {
+  let src = fs.readFileSync(sourceFilePath, "utf-8");
+  const newly = [];
+  for (const n of names) {
+    // Already exported? skip
+    if (new RegExp(`^export\\s+const\\s+${n}\\b`, "m").test(src)) continue;
+    // Exists as unexported top-level const?
+    const re = new RegExp(`^(const\\s+${n}\\b)`, "m");
+    if (!re.test(src)) continue;
+    src = src.replace(re, "export $1");
+    newly.push(n);
+  }
+  if (newly.length > 0) fs.writeFileSync(sourceFilePath, src, "utf-8");
+  return newly;
+}
+
+/**
+ * Parse top-level relative import statements (local files only).
+ * Returns [{importPath, symbols}]
+ */
+function parseLocalDataImports(content) {
+  const re = /^import\s*\{([^}]+)\}\s*from\s*["'](\.[^"']+)["']/gm;
+  const results = [];
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    const symbols = m[1].split(",").map(s => s.trim().replace(/\s+as\s+\w+$/, "").trim()).filter(Boolean);
+    results.push({ importPath: m[2], symbols });
+  }
+  return results;
+}
+
+/**
+ * Detect named exports from a data file: returns { exportName → 'array' | 'object' | 'scalar' }
+ */
+function parseDataFileExports(filePath) {
+  if (!fs.existsSync(filePath)) return {};
+  const src = fs.readFileSync(filePath, "utf-8");
+  const result = {};
+  const re = /^export\s+const\s+([A-Za-z_$][A-Za-z0-9_$]*)\s*[=:]/gm;
+  let m;
+  while ((m = re.exec(src)) !== null) {
+    const name = m[1];
+    const afterIdx = src.indexOf("=", m.index) + 1;
+    const afterSlice = src.slice(afterIdx, afterIdx + 10).trimStart();
+    result[name] = afterSlice.startsWith("[") ? "array" : afterSlice.startsWith("{") ? "object" : "scalar";
+  }
+  return result;
+}
+
+/**
+ * Extract inline TypeScript prop types for a named component from source content.
+ * Handles: `const Foo = ({ a, b }: { a: boolean; b: string }) =>`
+ * Handles nested object types (e.g., `data: { subStation: SubStation; } | null`)
+ * Returns [{name, type}]
+ */
+function extractComponentProps(content, componentName) {
+  const esc = componentName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const declRe = new RegExp(`(?:export\\s+)?const\\s+${esc}\\s*[:=]\\s*\\(`, "g");
+  const declMatch = declRe.exec(content);
+  if (!declMatch) return [];
+  const slice = content.slice(declMatch.index, declMatch.index + 5000);
+  // Find `}: {` — start of inline type annotation
+  const typeHeaderIdx = slice.search(/\}\s*:\s*\{/);
+  if (typeHeaderIdx === -1) return [];
+  const braceStart = slice.indexOf("{", typeHeaderIdx);
+  // Walk forward tracking brace depth to find the matching closing brace
+  let depth = 0, braceEnd = -1;
+  for (let i = braceStart; i < slice.length; i++) {
+    if (slice[i] === "{") depth++;
+    else if (slice[i] === "}") { depth--; if (depth === 0) { braceEnd = i; break; } }
+  }
+  if (braceEnd === -1) return [];
+  const typeBody = slice.slice(braceStart + 1, braceEnd);
+  // Smart prop parser: tracks depth so `;` inside nested types is skipped
+  const props = [];
+  let i = 0;
+  while (i < typeBody.length) {
+    while (i < typeBody.length && /\s/.test(typeBody[i])) i++;
+    if (i >= typeBody.length) break;
+    const nameMatch = typeBody.slice(i).match(/^(\w+)\??(\s*:\s*)/);
+    if (!nameMatch) { i++; continue; }
+    const propName = nameMatch[1];
+    i += nameMatch[0].length;
+    let typeDepth = 0;
+    const typeStartIdx = i;
+    while (i < typeBody.length) {
+      const ch = typeBody[i];
+      if ("{([<".includes(ch)) typeDepth++;
+      // `>` only closes angle brackets (generics), not `=>` arrow functions
+      else if ("})]".includes(ch) || (ch === ">" && typeDepth > 0)) typeDepth--;
+      else if (ch === ";" && typeDepth === 0) break;
+      i++;
+    }
+    const type = typeBody.slice(typeStartIdx, i).trim();
+    if (propName && type && !propName.startsWith("//") && propName !== "readonly") {
+      props.push({ name: propName, type });
+    }
+    i++; // skip `;`
+  }
+  return props;
+}
+
+/**
+ * Generate a mock value string for a TypeScript type, using available data exports.
+ */
+function mockValueForType(type, localExports) {
+  const t = type.trim();
+  if (t === "boolean") return "false";
+  if (t === "string") return '""';
+  if (t === "number") return "0";
+  if (t === "null" || t === "undefined") return "null";
+  if (t.startsWith("() =>") || t === "VoidFunction") return "() => {}";
+  if (t.startsWith("(") && t.includes("=>")) return "() => {}";
+  // Inline object type → null (complex; user fills it in)
+  if (t.startsWith("{")) return "null";
+  // Union ending in null/undefined → null
+  if (t.endsWith("| null") || t.endsWith("| undefined") || t.startsWith("null |")) return "null";
+  // String literal union → pick first quoted value
+  const firstLiteral = t.match(/["']([^"']+)["']/);
+  if (firstLiteral && (t.startsWith('"') || t.startsWith("'"))) return `"${firstLiteral[1]}"`;
+
+  // Try matching named type to available array exports
+  // Strip common suffixes to get the "base" name (e.g., RouteDef→route, SubStation→substation)
+  const typeLower = t.toLowerCase().replace(/def$|id$|key$|type$|interface$|kind$/i, "");
+  if (typeLower.length >= 3) {
+    for (const [expName, expKind] of Object.entries(localExports)) {
+      if (expKind !== "array") continue;
+      const expBase = expName.toLowerCase().replace(/_/g, "").replace(/s$/, "").replace(/data$/, "");
+      // Direct match: RouteDef → ROUTES (routedef→rout vs routes→rout)
+      if (expBase.slice(0, 4) === typeLower.slice(0, 4) || typeLower.slice(0, 4) === expBase.slice(0, 4)) {
+        return `${expName}[0]`;
+      }
+    }
+  }
+  return "undefined as any";
+}
+
+/**
+ * Build the story file content for a single internal component.
+ */
+function buildInternalComponentStoryContent(compName, parentImportPath, dataImportPath, dataSymbols, localExports, props, parentComp) {
+  const lines = [];
+  lines.push(`// @vds-regenerate — VDS auto-generated. Remove this line to prevent overwrite.`);
+  lines.push(`import React from "react";`);
+  lines.push(`import type { Meta, StoryObj } from "@storybook/react";`);
+  lines.push(`import { ${compName} } from "${parentImportPath}";`);
+  if (dataImportPath && dataSymbols.length > 0) {
+    lines.push(`import { ${dataSymbols.join(", ")} } from "${dataImportPath}";`);
+  }
+  lines.push(``);
+  lines.push(`/**`);
+  lines.push(` * **${compName}** — sub-component of ${parentComp.name}.`);
+  lines.push(` * Auto-exported by VDS for isolated Storybook documentation.`);
+  lines.push(` */`);
+  lines.push(`const meta: Meta<typeof ${compName}> = {`);
+  lines.push(`  title: "${parentComp.group || "Screens"}/${parentComp.name}/${compName}",`);
+  lines.push(`  component: ${compName},`);
+  lines.push(`  parameters: {`);
+  lines.push(`    layout: "centered",`);
+  lines.push(`    backgrounds: { default: "dark" },`);
+  lines.push(`  },`);
+  lines.push(`};`);
+  lines.push(`export default meta;`);
+  lines.push(`type Story = StoryObj<typeof meta>;`);
+  lines.push(``);
+
+  if (props.length > 0) {
+    const argLines = props.map(p => `    ${p.name}: ${mockValueForType(p.type, localExports)},`).join("\n");
+    lines.push(`export const Default: Story = {`);
+    lines.push(`  args: {`);
+    lines.push(argLines);
+    lines.push(`  },`);
+    lines.push(`};`);
+  } else {
+    lines.push(`export const Default: Story = {};`);
+  }
+  return lines.join("\n") + "\n";
+}
+
+/**
+ * Main orchestrator: auto-exports internal components + generates individual story files.
+ * Called for each comp with isPageComponent: true.
+ */
+function generateInternalComponentStories(comp) {
+  const names = comp.internalComponentNames || [];
+  if (names.length === 0) return;
+
+  // Locate the source file (COMPONENTS_REL_DIR is a module-level variable set in main())
+  const sourceFile = path.join(PROJECT_ROOT, COMPONENTS_REL_DIR, comp.file);
+  if (!fs.existsSync(sourceFile)) return;
+
+  const sourceContent = fs.readFileSync(sourceFile, "utf-8");
+
+  // Step 1: Auto-export internal components
+  const newly = autoExportInternalComponents(sourceFile, names);
+  if (newly.length > 0) {
+    console.log(`[VDS] ${comp.name} → auto-exported ${newly.length} sub-components: ${newly.join(", ")}`);
+  }
+
+  // Step 2: Find best local data import (most array-typed exports)
+  const localImports = parseLocalDataImports(sourceContent);
+  let bestImportPath = null;
+  let bestSymbols = [];
+  let bestExports = {};
+  for (const li of localImports) {
+    const resolved = path.resolve(path.dirname(sourceFile), li.importPath);
+    const exts = ["", ".ts", ".tsx", ".js", ".jsx"];
+    let found = null;
+    for (const ext of exts) {
+      const p = resolved + ext;
+      if (fs.existsSync(p)) { found = p; break; }
+    }
+    if (!found) continue;
+    const exports = parseDataFileExports(found);
+    const arrayCount = Object.values(exports).filter(k => k === "array").length;
+    if (arrayCount > Object.values(bestExports).filter(k => k === "array").length) {
+      bestImportPath = li.importPath;
+      bestSymbols = li.symbols;
+      bestExports = exports;
+    }
+  }
+
+  // Step 3: Compute import paths relative to STORIES_DIR
+  const storiesRelToSource = path.relative(path.dirname(sourceFile), path.join(PROJECT_ROOT, "src", "stories"));
+  const sourceRelFromStories = path.relative(
+    path.join(PROJECT_ROOT, "src", "stories"),
+    sourceFile.replace(/\.(tsx?|jsx?)$/, "")
+  ).replace(/\\/g, "/");
+  const parentImportPath = sourceRelFromStories.startsWith(".") ? sourceRelFromStories : "./" + sourceRelFromStories;
+
+  let dataImportFromStories = null;
+  if (bestImportPath) {
+    const dataAbsolute = path.resolve(path.dirname(sourceFile), bestImportPath);
+    dataImportFromStories = path.relative(
+      path.join(PROJECT_ROOT, "src", "stories"),
+      dataAbsolute
+    ).replace(/\\/g, "/").replace(/\.(tsx?|jsx?)$/, "");
+    if (!dataImportFromStories.startsWith(".")) dataImportFromStories = "./" + dataImportFromStories;
+  }
+
+  // Step 4: Generate individual story files
+  for (const name of names) {
+    const storyFile = path.join(STORIES_DIR, `${name}.stories.tsx`);
+    if (fs.existsSync(storyFile)) continue; // Never overwrite existing stories
+    const props = extractComponentProps(sourceContent, name);
+    const content = buildInternalComponentStoryContent(
+      name, parentImportPath, dataImportFromStories, bestSymbols, bestExports, props, comp
+    );
+    fs.writeFileSync(storyFile, content, "utf-8");
+    console.log(`[VDS] Wrote ${path.relative(PROJECT_ROOT, storyFile)} (sub-component of ${comp.name})`);
+  }
+}
+
 main();