vibe-design-system 2.8.5 → 2.8.6

package/package.json

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

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

@@ -271,14 +271,10 @@ function collectProvidersAndWarnings(projectRoot) {
     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",
-      importPath: "react-dnd",
-      props: "{ backend: HTML5Backend }",
-      extraImport: { name: "HTML5Backend", from: "react-dnd-html5-backend" },
-    });
-  }
+  // NOTE: DndProvider intentionally NOT injected globally.
+  // react-dnd as a global Storybook decorator causes a dual-React-instance crash
+  // (Cannot read properties of null (reading 'useEffect')).
+  // Components using DnD are handled individually via ErrorBoundary.
   return { providersToAdd, hooksWithoutProvider, hooksByFile };
 }
 

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

@@ -1454,6 +1454,7 @@ function writeComponentSuggestionsStory(componentSuggestions) {
   const content =
     [
       "import type { Meta, StoryObj } from \"@storybook/react\";",
+      "import { useState } from \"react\";",
       "",
       "const meta = { title: \"Foundations/Component Suggestions\" } satisfies Meta;",
       "export default meta;",
@@ -1461,19 +1462,60 @@ function writeComponentSuggestionsStory(componentSuggestions) {
       "",
       `const suggestions = ${JSON.stringify(suggestions)};`,
       "",
+      "function buildPrompt(s: any) {",
+      "  const files = s.foundIn.join(', ');",
+      "  return [",
+      "    `Extract the repeated JSX pattern below into a new reusable React component named \\`${s.suggestedName}\\`.`,",
+      "    ``,",
+      "    `This pattern appears ${s.occurrences} time(s) across: ${files}`,",
+      "    ``,",
+      "    `Pattern:`,",
+      "    s.snippet,",
+      "    ``,",
+      "    `Instructions:`,",
+      "    `- Create a new file for ${s.suggestedName} with proper TypeScript props`,",
+      "    `- Replace all occurrences in the files above with the new component`,",
+      "    `- Keep existing styling and behavior exactly the same`,",
+      "  ].join('\\n');",
+      "}",
+      "",
+      "function SuggestionCard({ s }: { s: any }) {",
+      "  const [copied, setCopied] = useState(false);",
+      "  const copy = () => {",
+      "    navigator.clipboard.writeText(buildPrompt(s)).then(() => {",
+      "      setCopied(true);",
+      "      setTimeout(() => setCopied(false), 2000);",
+      "    });",
+      "  };",
+      "  return (",
+      "    <div style={{ border: '1px solid #e2e8f0', borderRadius: 12, padding: 20, background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>",
+      "      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>",
+      "        <div>",
+      "          <div style={{ fontWeight: 700, fontSize: 16, color: '#1a202c', marginBottom: 4 }}>{s.suggestedName}</div>",
+      "          <div style={{ fontSize: 12, color: '#718096' }}>{s.reason}</div>",
+      "        </div>",
+      "        <button onClick={copy} style={{ flexShrink: 0, marginLeft: 16, padding: '8px 16px', borderRadius: 8, border: 'none', cursor: 'pointer', fontWeight: 600, fontSize: 13, background: copied ? '#48bb78' : '#6366f1', color: '#fff', transition: 'background 0.2s' }}>",
+      "          {copied ? '✅ Copied!' : '📋 Copy Prompt'}",
+      "        </button>",
+      "      </div>",
+      "      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>",
+      "        {s.foundIn.map((f: string, i: number) => (",
+      "          <span key={i} style={{ fontSize: 11, background: '#edf2f7', color: '#4a5568', padding: '2px 8px', borderRadius: 4, fontFamily: 'monospace' }}>{f}</span>",
+      "        ))}",
+      "      </div>",
+      "      <pre style={{ margin: 0, padding: 12, background: '#1a202c', borderRadius: 8, overflow: 'auto', fontSize: 12, color: '#e2e8f0', lineHeight: 1.6 }}><code>{s.snippet}</code></pre>",
+      "      <div style={{ marginTop: 10, fontSize: 12, color: '#a0aec0' }}>💡 Copy Prompt'a tıkla → Cursor / Superflex'e yapıştır → component otomatik oluşturulur.</div>",
+      "    </div>",
+      "  );",
+      "}",
+      "",
       "export const Default: Story = {",
       "  render: () => (",
-      "    <div style={{ padding: 24, fontFamily: \"system-ui, sans-serif\" }}>",
-      "      <h2 style={{ marginBottom: 16 }}>Visual section candidates (component suggestions)</h2>",
-      "      <p style={{ color: \"#888\", marginBottom: 24 }}>From src/pages, src/app ve src/components: kendi className kümeleri, 2+ child element, 2+ tekrar. Aynı yapı birden fazla dosyada geçiyorsa ayrı component olarak düşünün.</p>",
-      "      <div style={{ display: \"flex\", flexDirection: \"column\", gap: 24 }}>",
-      "        {suggestions.map((s, i) => (",
-      "          <div key={i} style={{ border: \"1px solid #333\", borderRadius: 8, padding: 16, background: \"#111\" }}>",
-      "            <div style={{ fontWeight: 600, marginBottom: 8 }}>{s.suggestedName}</div>",
-      "            <div style={{ fontSize: 12, color: \"#888\", marginBottom: 8 }}>{s.reason} · {s.foundIn.join(\", \")}</div>",
-      "            <pre style={{ margin: 0, padding: 12, background: \"#000\", borderRadius: 4, overflow: \"auto\", fontSize: 12 }}><code>{s.snippet}</code></pre>",
-      "          </div>",
-      "        ))}",
+      "    <div style={{ padding: 32, fontFamily: 'system-ui, sans-serif', background: '#f7fafc', minHeight: '100vh' }}>",
+      "      <h2 style={{ marginBottom: 8, fontSize: 24, fontWeight: 700, color: '#1a202c' }}>Component Suggestions</h2>",
+      "      <p style={{ color: '#718096', marginBottom: 32, fontSize: 14 }}>Bu pattern'ler birden fazla dosyada tekrar ediyor. Her biri ayrı bir component olabilir. <strong>Copy Prompt</strong> butonuna tıklayıp Cursor veya Superflex'e yapıştır.</p>",
+      "      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>",
+      "        {suggestions.map((s: any, i: number) => <SuggestionCard key={i} s={s} />)}",
       "      </div>",
       "    </div>",
       "  ),",
@@ -1548,22 +1590,25 @@ function main() {
     // ignore
   }
 
-  // Clear existing .stories.* files (except foundations/*.mdx) so only VDS-generated stories remain
-  try {
-    const existing = fs.readdirSync(STORIES_DIR);
-    for (const name of existing) {
-      if (name === "foundations") continue;
-      if (
-        name.endsWith(".stories.tsx") ||
-        name.endsWith(".stories.ts") ||
-        name.endsWith(".stories.jsx") ||
-        name.endsWith(".stories.js")
-      ) {
-        fs.unlinkSync(path.join(STORIES_DIR, name));
+  // Clear existing .stories.* files only on full regeneration (no filter arg),
+  // so that "node story-generator.mjs SomeName" doesn't wipe other stories.
+  if (!onlyName) {
+    try {
+      const existing = fs.readdirSync(STORIES_DIR);
+      for (const name of existing) {
+        if (name === "foundations") continue;
+        if (
+          name.endsWith(".stories.tsx") ||
+          name.endsWith(".stories.ts") ||
+          name.endsWith(".stories.jsx") ||
+          name.endsWith(".stories.js")
+        ) {
+          fs.unlinkSync(path.join(STORIES_DIR, name));
+        }
       }
+    } catch {
+      // ignore
     }
-  } catch {
-    // ignore
   }
 
   for (const comp of components) {