vibe-design-system 2.5.16 → 2.5.18

package/bin/init.js

@@ -49,6 +49,7 @@ export default config;
 const STORYBOOK_PREVIEW_TS = `import type { Preview } from "@storybook/react";
 import React from "react";
 import { MemoryRouter } from "react-router-dom";
+// Uygulamanızla aynı stiller için: index.css + kullandığınız diğer global CSS dosyalarını ekleyin (örn. "../src/App.css").
 import "../src/index.css";
 
 const withRouter = (Story: any) => {
@@ -94,6 +95,8 @@ Geliştirme kuralları:
 - Variant'lar için cva() kullan
 - Tailwind CSS kullan
 - Named export veya default export — ikisi de çalışır
+
+Storybook stilleri sayfalardan farklıysa: .storybook/preview.ts içinde uygulamanızın kullandığı tüm global CSS dosyalarını import edin (index.css dışında App.css, globals.css vb.).
 `;
 
 const WATCH_MJS = `#!/usr/bin/env node
@@ -175,6 +178,7 @@ function installStorybook(projectRoot) {
     [
       "install",
       "--save-dev",
+      "--save-exact",
       `storybook@${STORYBOOK_VERSION}`,
       `@storybook/react-vite@${STORYBOOK_VERSION}`,
       `@storybook/react@${STORYBOOK_VERSION}`,

package/package.json

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

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

@@ -445,6 +445,19 @@ function parsePropsFromSource(source) {
 /** Default icon for LucideIcon prop when name is generic (icon, leftIcon, etc.). */
 const LUCIDE_ICON_DEFAULT = "Star";
 
+/** Yaygın required string prop isimleri için anlamlı varsayılan metin (component'in boş/Example yerine görünür render etmesi için). */
+const DEFAULT_STRINGS_BY_PROP_NAME = {
+  eyebrow: "Label",
+  title: "Section title",
+  description: "Short description for the section.",
+  value: "100",
+  name: "Example",
+  heading: "Heading",
+  subtitle: "Subtitle text",
+  text: "Sample text",
+  label: "Label",
+};
+
 /** Build default args lines and lucide-react imports for required props (LucideIcon → icon component, X[] → example item). */
 function buildDefaultArgsForRequiredProps(props) {
   const argLines = [];
@@ -459,10 +472,13 @@ function buildDefaultArgsForRequiredProps(props) {
       lucideImports.add(iconName);
       argLines.push(`    ${name}: ${iconName},`);
     } else if (/\[\]/.test(type)) {
-      const itemTypeMatch = type.match(/([A-Za-z0-9_]+)(?=\s*\[\])/);
-      const itemType = itemTypeMatch ? itemTypeMatch[1] : "Item";
-      const example = getExampleItemForArrayType(itemType);
-      argLines.push(`    ${name}: ${JSON.stringify(example)},`);
+      if (/string\s*\[\]/.test(type)) {
+        argLines.push(`    ${name}: ["Example"],`);
+      } else {
+        argLines.push(`    ${name}: [],`);
+      }
+    } else if (/string/.test(type) && DEFAULT_STRINGS_BY_PROP_NAME[name] !== undefined) {
+      argLines.push(`    ${name}: ${JSON.stringify(DEFAULT_STRINGS_BY_PROP_NAME[name])},`);
     }
   }
   return { argLines, lucideImports: [...lucideImports] };
@@ -591,19 +607,15 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
     lines.push(`import { ${lucideImports.join(", ")} } from "lucide-react";`);
   }
 
-  const isCardWithoutNamedExports = componentName === "Card" && !hasNamedExports(source, ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]);
+  // Card: compound component (Header/Content) bazı projelerde yok; displayName hatasını önlemek için her zaman basit fallback kullanıyoruz.
+  const isCard = componentName === "Card";
   let effectiveRecipe = recipe;
-  if (isCardWithoutNamedExports) {
+  if (isCard) {
     effectiveRecipe = {
       imports: [],
       render: `(args) => (
       <ComponentRef className="w-[340px]" {...args}>
-        <ComponentRef.Header>
-          <ComponentRef.Title>Card title</ComponentRef.Title>
-          <ComponentRef.Description>Short description.</ComponentRef.Description>
-        </ComponentRef.Header>
-        <ComponentRef.Content><p>Card body content here.</p></ComponentRef.Content>
-        <ComponentRef.Footer>Footer</ComponentRef.Footer>
+        <p>Card content</p>
       </ComponentRef>
     )`,
     };
@@ -630,18 +642,11 @@ function buildRecipeStoryContent(comp, componentName, importPath, title, source,
     lines.push(`import { ${ext.names.join(", ")} } from "${ext.from}";`);
   }
 
-  const needsRouterDecorator = hasToOrHrefProp(comp, source);
-  if (needsRouterDecorator) {
-    lines.push(`import { MemoryRouter } from "react-router-dom";`);
-  }
   lines.push("");
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (needsRouterDecorator) {
-    lines.push(`  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>],`);
-  }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
   lines.push(`export default meta;`);
@@ -757,18 +762,11 @@ function buildStoryFileContent(comp) {
     lines.push(`const ComponentRef = ${namedAlias} ?? ${defaultAlias};`);
   }
 
-  const needsRouterDecorator = hasToOrHrefProp(comp, source);
-  if (needsRouterDecorator) {
-    lines.push(`import { MemoryRouter } from "react-router-dom";`);
-  }
   lines.push("");
   lines.push(`const meta = {`);
   lines.push(`  title: ${JSON.stringify(title)},`);
   lines.push(`  component: ComponentRef,`);
   lines.push(`  tags: ["autodocs"],`);
-  if (needsRouterDecorator) {
-    lines.push(`  decorators: [(Story) => <MemoryRouter><Story /></MemoryRouter>],`);
-  }
   lines.push(`} satisfies Meta<typeof ComponentRef>;`);
   lines.push("");
   lines.push(`export default meta;`);