vibe-design-system 2.8.4 → 2.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-design-system",
-  "version": "2.8.4",
+  "version": "2.8.6",
   "description": "Auto-generate design systems for vibe coding projects",
   "type": "module",
   "bin": {
@@ -38,4 +38,4 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.19"
   }
-}
+}

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

@@ -538,6 +538,12 @@ const COMPONENT_EXTRA_ARGS = {
     "    totalEstimated: 0,",
     "    projectTotalEstimated: 0,",
   ],
+  TimeTable: [
+    "    logs: [{ id: \"1\", taskId: \"t1\", userId: \"u1\", date: \"2024-01-15\", hours: 8, description: \"Work session\", billable: true, status: \"submitted\" }, { id: \"2\", taskId: \"t1\", userId: \"u1\", date: \"2024-01-16\", hours: 6, description: \"Review session\", billable: false, status: \"draft\" }],",
+    "    users: [],",
+    "    tasks: [],",
+    "    onLogClick: () => {},",
+  ],
 };
 
 /** Render'da args'a uygulanacak fallback (useState(estimate.toString()) gibi kullanımlar için; args/Controls undefined yapsa bile). */
@@ -550,6 +556,7 @@ const SAFE_WRAPPER_DEFAULTS = {
   TaskEstimateInput: `{ estimate: 0, onUpdate: () => {}, value: 0, task: { id: "1", title: "Example", estimate: 0 }, compact: false }`,
   TimeFilterPanel: `{ filter: { preset: null, dateRange: {}, userIds: [], tags: [], billable: "all" }, onFilterChange: () => {}, onSaveFilter: () => {}, onDeleteFilter: () => {}, filteredCount: 0, savedFilters: [] }`,
   TimeStats: `{ totalLogged: 0, totalBillable: 0, totalNonBillable: 0, totalBilled: 0, totalEstimated: 0, projectTotalEstimated: 0 }`,
+  TimeTable: `{ logs: [{ id: "1", taskId: "t1", userId: "u1", date: "2024-01-15", hours: 8, description: "Work session", billable: true, status: "submitted" }, { id: "2", taskId: "t1", userId: "u1", date: "2024-01-16", hours: 6, description: "Review session", billable: false, status: "draft" }], users: [], tasks: [], onLogClick: () => {} }`,
 };
 
 /** Recursive list of .tsx/.jsx file paths under dir (relative to dir). Index.tsx / index.tsx first for deterministic "first usage". */
@@ -821,15 +828,23 @@ function buildDefaultArgsForRequiredProps(props, usageFromPages = null, componen
       }
     }
   }
-  // COMPONENT_EXTRA_ARGS: props listesi boş olsa bile (örn. parse edilemeyen component) uygula
+  // COMPONENT_EXTRA_ARGS: props listesi boş olsa bile (örn. parse edilemeyen component) uygula.
+  // Bu blok her zaman override eder — auto-generated değerleri daha doğru olanlarla değiştirir.
   if (componentName && COMPONENT_EXTRA_ARGS[componentName]) {
     for (const line of COMPONENT_EXTRA_ARGS[componentName]) {
       const keyMatch = line.match(/^\s*(\w+)\s*:/);
       const key = keyMatch ? keyMatch[1] : null;
-      if (key && !added.has(key)) {
-        argLines.push(line);
-        added.add(key);
+      if (!key) continue;
+      if (added.has(key)) {
+        // Remove the previously auto-generated line for this key so we can replace it
+        const idx = argLines.findIndex(l => {
+          const m = l.match(/^\s*(\w+)\s*:/);
+          return m && m[1] === key;
+        });
+        if (idx !== -1) argLines.splice(idx, 1);
       }
+      argLines.push(line);
+      added.add(key);
     }
   }
   for (const name of Object.keys(fromPages)) {
@@ -1439,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;",
@@ -1446,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>",
       "  ),",
@@ -1533,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) {