vibe-design-system 1.9.12 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/bin/init.js +220 -116
  2. package/package.json +1 -1
package/bin/init.js CHANGED
@@ -1,14 +1,16 @@
1
1
  #!/usr/bin/env node
2
2
  /**
3
- * VDS installer: npx vibe-design-system init
3
+ * VDS init: npx vibe-design-system init
4
4
  *
5
- * Single command that:
6
- * 1. Copies vds-core files (scan.mjs, story-generator.mjs, dashboard-server.mjs)
7
- * 2. Installs Storybook if not present (npx storybook@latest init --yes)
8
- * 3. Creates/updates .storybook/preview with index.css import and dark decorator
9
- * 4. Runs node vds-core/scan.mjs
10
- * 5. Runs node vds-core/story-generator.mjs
11
- * 6. Adds all scripts to package.json
5
+ * ADIM 1 — Bağımlılık kontrolü (storybook, @storybook/react-vite)
6
+ * ADIM 2 — .storybook/ (main.ts, preview.ts)
7
+ * ADIM 3 — vds-core/ kopyala
8
+ * ADIM 4 — package.json scriptleri
9
+ * ADIM 5 — .cursorrules
10
+ * ADIM 6 — src/stories/
11
+ * ADIM 7 — İlk tarama (scan + story-generator)
12
+ * ADIM 8 — Başarı mesajı
13
+ * ADIM 9 — Storybook örnek dosyalarını sil
12
14
  */
13
15
  import fs from "fs";
14
16
  import path from "path";
@@ -19,125 +21,205 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
19
21
  const INSTALLER_ROOT = path.join(__dirname, "..");
20
22
  const TEMPLATE_DIR = path.join(INSTALLER_ROOT, "vds-core-template");
21
23
 
24
+ const STORYBOOK_MAIN_TS = `import type { StorybookConfig } from "@storybook/react-vite";
25
+ const config: StorybookConfig = {
26
+ stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
27
+ addons: ["@storybook/addon-essentials"],
28
+ framework: {
29
+ name: "@storybook/react-vite",
30
+ options: {},
31
+ },
32
+ };
33
+ export default config;
34
+ `;
35
+
36
+ const STORYBOOK_PREVIEW_TS = `import type { Preview } from "@storybook/react";
37
+ import "../src/index.css";
38
+ const preview: Preview = { parameters: { layout: "centered" } };
39
+ export default preview;
40
+ `;
41
+
42
+ const CURSORRULES = `# VDS — Vibe Design System
43
+ Bu proje VDS kullanıyor. Komutlar:
44
+ - npm run vds → projeyi tara
45
+ - npm run vds:stories → Storybook story'lerini üret
46
+ - npm run vds:watch → değişiklikleri izle
47
+ - npm run storybook → design system'ı aç (localhost:6006)
48
+
49
+ Geliştirme kuralları:
50
+ - UI component'leri src/components/ui/ altına koy
51
+ - Variant'lar için cva() kullan
52
+ - Tailwind CSS kullan
53
+ - Named export veya default export — ikisi de çalışır
54
+ `;
55
+
56
+ const WATCH_MJS = `#!/usr/bin/env node
57
+ import { spawnSync } from "child_process";
58
+ import path from "path";
59
+ import { fileURLToPath } from "url";
60
+ const __dirname = path.dirname(fileURLToPath(import.meta.url));
61
+ const projectRoot = path.join(__dirname, "..");
62
+ const r = spawnSync("node", [path.join(__dirname, "scan.mjs"), "--watch"], {
63
+ cwd: projectRoot,
64
+ stdio: "inherit",
65
+ });
66
+ process.exit(r.status ?? 0);
67
+ `;
68
+
69
+ const STORYBOOK_EXAMPLE_FILES = [
70
+ "Button.stories.js",
71
+ "Header.stories.js",
72
+ "Page.stories.js",
73
+ "Button.jsx",
74
+ "Header.jsx",
75
+ "Page.jsx",
76
+ ];
77
+
22
78
  function getProjectRoot() {
23
- const cwd = process.cwd();
24
- try {
25
- const pkg = JSON.parse(fs.readFileSync(path.join(cwd, "package.json"), "utf-8"));
26
- if (pkg.name === "vibe-design-system") return path.join(cwd, "..");
27
- } catch (_) {}
28
- return cwd;
79
+ return process.cwd();
29
80
  }
30
81
 
31
- function isStorybookInstalled(projectRoot) {
32
- const storybookDir = path.join(projectRoot, ".storybook");
33
- if (fs.existsSync(storybookDir)) return true;
82
+ function readPackageJson(projectRoot) {
34
83
  const pkgPath = path.join(projectRoot, "package.json");
84
+ if (!fs.existsSync(pkgPath)) return null;
35
85
  try {
36
- const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
37
- const dev = pkg.devDependencies || {};
38
- if (dev["@storybook/react-vite"] || dev["storybook"]) return true;
39
- } catch (_) {}
40
- return false;
86
+ return JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
87
+ } catch (_) {
88
+ return null;
89
+ }
90
+ }
91
+
92
+ // ADIM 1 — Bağımlılık kontrolü
93
+ function needsStorybook(projectRoot) {
94
+ const pkg = readPackageJson(projectRoot);
95
+ if (!pkg) return false;
96
+ const dev = pkg.devDependencies || {};
97
+ return !(dev.storybook && dev["@storybook/react-vite"]);
41
98
  }
42
99
 
43
100
  function installStorybook(projectRoot) {
44
- console.log("📚 Storybook kuruluyor...");
45
- const r = spawnSync("npx", ["storybook@latest", "init", "--yes"], {
46
- cwd: projectRoot,
47
- stdio: "inherit",
48
- shell: true,
49
- });
101
+ console.log("📚 Storybook bağımlılıkları kuruluyor...");
102
+ const r = spawnSync(
103
+ "npm",
104
+ ["install", "--save-dev", "storybook", "@storybook/react", "@storybook/react-vite"],
105
+ { cwd: projectRoot, stdio: "inherit" }
106
+ );
50
107
  if (r.status !== 0) {
51
- console.warn("⚠️ Storybook init tamamlanamadı; manuel: npx storybook@latest init");
108
+ console.warn("⚠️ npm install storybook tamamlanamadı.");
52
109
  }
53
110
  }
54
111
 
55
- const PREVIEW_CONTENT = `import type { Preview } from "@storybook/react-vite";
56
- import React from "react";
57
- import "../src/index.css";
112
+ // ADIM 2 — .storybook/
113
+ function ensureStorybook(projectRoot) {
114
+ const storybookDir = path.join(projectRoot, ".storybook");
115
+ if (!fs.existsSync(storybookDir)) {
116
+ fs.mkdirSync(storybookDir, { recursive: true });
117
+ console.log("📁 .storybook/ oluşturuldu.");
118
+ }
58
119
 
59
- const preview: Preview = {
60
- parameters: {
61
- controls: {
62
- matchers: {
63
- color: /(background|color)$/i,
64
- date: /Date$/i,
65
- },
66
- },
67
- },
68
- decorators: [
69
- (Story) => (
70
- <div className="dark" style={{ minHeight: "100vh", padding: "1rem" }}>
71
- <Story />
72
- </div>
73
- ),
74
- ],
75
- };
120
+ const mainPath = path.join(storybookDir, "main.ts");
121
+ if (!fs.existsSync(mainPath)) {
122
+ fs.writeFileSync(mainPath, STORYBOOK_MAIN_TS, "utf-8");
123
+ console.log("📝 .storybook/main.ts yazıldı.");
124
+ }
76
125
 
77
- export default preview;
78
- `;
126
+ const previewPath = path.join(storybookDir, "preview.ts");
127
+ if (!fs.existsSync(previewPath)) {
128
+ fs.writeFileSync(previewPath, STORYBOOK_PREVIEW_TS, "utf-8");
129
+ console.log("📝 .storybook/preview.ts yazıldı.");
130
+ }
131
+ }
79
132
 
80
- function ensureStorybookPreview(projectRoot) {
81
- const storybookDir = path.join(projectRoot, ".storybook");
82
- if (!fs.existsSync(storybookDir)) fs.mkdirSync(storybookDir, { recursive: true });
133
+ // ADIM 3 — vds-core/ kopyala
134
+ function copyDirRecursive(src, dest) {
135
+ if (!fs.existsSync(src)) return;
136
+ if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
137
+ for (const name of fs.readdirSync(src)) {
138
+ const srcPath = path.join(src, name);
139
+ const destPath = path.join(dest, name);
140
+ if (fs.statSync(srcPath).isDirectory()) {
141
+ copyDirRecursive(srcPath, destPath);
142
+ } else {
143
+ fs.copyFileSync(srcPath, destPath);
144
+ }
145
+ }
146
+ }
83
147
 
84
- const previewTsx = path.join(storybookDir, "preview.tsx");
85
- const previewTs = path.join(storybookDir, "preview.ts");
86
- if (fs.existsSync(previewTs)) try { fs.unlinkSync(previewTs); } catch (_) {}
87
- fs.writeFileSync(previewTsx, PREVIEW_CONTENT, "utf-8");
88
- console.log("📝 .storybook/preview.tsx güncellendi (index.css + dark decorator).");
148
+ function ensureVdsCore(projectRoot) {
149
+ const vdsCoreDest = path.join(projectRoot, "vds-core");
150
+ if (!fs.existsSync(vdsCoreDest)) {
151
+ fs.mkdirSync(vdsCoreDest, { recursive: true });
152
+ }
153
+ copyDirRecursive(TEMPLATE_DIR, vdsCoreDest);
154
+ const watchPath = path.join(vdsCoreDest, "watch.mjs");
155
+ if (!fs.existsSync(watchPath)) {
156
+ fs.writeFileSync(watchPath, WATCH_MJS, "utf-8");
157
+ }
158
+ console.log("📦 vds-core/ hazır.");
89
159
  }
90
160
 
161
+ // ADIM 4 — package.json scriptleri
91
162
  function addScripts(projectRoot) {
92
163
  const pkgPath = path.join(projectRoot, "package.json");
93
- const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
164
+ const pkg = readPackageJson(projectRoot);
165
+ if (!pkg) return;
94
166
  const scripts = pkg.scripts || {};
95
- if (!scripts.vds) scripts.vds = "node vds-core/scan.mjs";
96
- if (!scripts["vds:watch"]) scripts["vds:watch"] = "node vds-core/scan.mjs --watch";
97
- if (!scripts["vds:dashboard"]) scripts["vds:dashboard"] = "node vds-core/dashboard-server.mjs";
98
- if (!scripts["vds:stories"]) scripts["vds:stories"] = "node vds-core/story-generator.mjs";
99
- if (!scripts.storybook) scripts.storybook = "storybook dev -p 6006";
100
- if (!scripts["build-storybook"]) scripts["build-storybook"] = "storybook build";
101
- pkg.scripts = scripts;
102
- fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
103
- }
104
-
105
- function addVdsDependency(projectRoot) {
106
- const pkgPath = path.join(projectRoot, "package.json");
107
- const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
108
- const dev = pkg.devDependencies || {};
109
- if (!dev["vibe-design-system"]) {
110
- dev["vibe-design-system"] = "^1.9.0";
111
- pkg.devDependencies = dev;
167
+ let changed = false;
168
+ if (!scripts.vds) {
169
+ scripts.vds = "node vds-core/scan.mjs";
170
+ changed = true;
171
+ }
172
+ if (!scripts["vds:stories"]) {
173
+ scripts["vds:stories"] = "node vds-core/story-generator.mjs";
174
+ changed = true;
175
+ }
176
+ if (!scripts["vds:watch"]) {
177
+ scripts["vds:watch"] = "node vds-core/watch.mjs";
178
+ changed = true;
179
+ }
180
+ if (!scripts.storybook) {
181
+ scripts.storybook = "storybook dev -p 6006";
182
+ changed = true;
183
+ }
184
+ if (!scripts["build-storybook"]) {
185
+ scripts["build-storybook"] = "storybook build";
186
+ changed = true;
187
+ }
188
+ if (changed) {
189
+ pkg.scripts = scripts;
112
190
  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
113
- const r = spawnSync("npm", ["install"], { cwd: projectRoot, stdio: "inherit", shell: true });
114
- if (r.status !== 0) console.warn("npm install uyarı verdi; manuel çalıştırın: npm install");
191
+ console.log("📜 package.json scriptleri eklendi.");
115
192
  }
116
193
  }
117
194
 
118
- function ensureVdsCore(projectRoot) {
119
- const vdsCoreDest = path.join(projectRoot, "vds-core");
120
- if (!fs.existsSync(vdsCoreDest)) fs.mkdirSync(vdsCoreDest, { recursive: true });
195
+ // ADIM 5 — .cursorrules
196
+ function ensureCursorrules(projectRoot) {
197
+ const p = path.join(projectRoot, ".cursorrules");
198
+ fs.writeFileSync(p, CURSORRULES, "utf-8");
199
+ console.log("📄 .cursorrules yazıldı.");
200
+ }
121
201
 
122
- const scanSrc = path.join(TEMPLATE_DIR, "scan.mjs");
123
- if (fs.existsSync(scanSrc)) {
124
- fs.copyFileSync(scanSrc, path.join(vdsCoreDest, "scan.mjs"));
125
- } else {
126
- console.error("vds-core-template/scan.mjs bulunamadı.");
127
- process.exit(1);
202
+ // ADIM 6 — src/stories/ (ve scan için gerekli src/components, src/pages)
203
+ function ensureStoriesDir(projectRoot) {
204
+ const srcDir = path.join(projectRoot, "src");
205
+ if (!fs.existsSync(srcDir)) fs.mkdirSync(srcDir, { recursive: true });
206
+ const storiesDir = path.join(srcDir, "stories");
207
+ if (!fs.existsSync(storiesDir)) {
208
+ fs.mkdirSync(storiesDir, { recursive: true });
209
+ console.log("📁 src/stories/ oluşturuldu.");
128
210
  }
129
-
130
- const serverSrc = path.join(TEMPLATE_DIR, "dashboard-server.mjs");
131
- if (fs.existsSync(serverSrc)) {
132
- fs.copyFileSync(serverSrc, path.join(vdsCoreDest, "dashboard-server.mjs"));
211
+ const componentsDir = path.join(srcDir, "components");
212
+ if (!fs.existsSync(componentsDir)) {
213
+ fs.mkdirSync(componentsDir, { recursive: true });
214
+ console.log("📁 src/components/ oluşturuldu (VDS taraması için).");
133
215
  }
134
-
135
- const storyGenSrc = path.join(TEMPLATE_DIR, "story-generator.mjs");
136
- if (fs.existsSync(storyGenSrc)) {
137
- fs.copyFileSync(storyGenSrc, path.join(vdsCoreDest, "story-generator.mjs"));
216
+ const pagesDir = path.join(srcDir, "pages");
217
+ if (!fs.existsSync(pagesDir)) {
218
+ fs.mkdirSync(pagesDir, { recursive: true });
138
219
  }
139
220
  }
140
221
 
222
+ // ADIM 7 — İlk tarama
141
223
  function runScan(projectRoot) {
142
224
  const scanPath = path.join(projectRoot, "vds-core", "scan.mjs");
143
225
  if (!fs.existsSync(scanPath)) return;
@@ -162,39 +244,61 @@ function runStoryGenerator(projectRoot) {
162
244
  if (r.status !== 0) process.exitCode = r.status ?? 1;
163
245
  }
164
246
 
165
- console.log("🎨 VDS kuruluyor...");
247
+ // ADIM 9 — Storybook örnek dosyalarını sil
248
+ function removeStorybookExamples(projectRoot) {
249
+ const storiesDir = path.join(projectRoot, "src", "stories");
250
+ if (!fs.existsSync(storiesDir)) return;
251
+ for (const name of STORYBOOK_EXAMPLE_FILES) {
252
+ const filePath = path.join(storiesDir, name);
253
+ if (fs.existsSync(filePath)) {
254
+ try {
255
+ fs.unlinkSync(filePath);
256
+ console.log("🗑️ Silindi: src/stories/" + name);
257
+ } catch (_) {}
258
+ }
259
+ }
260
+ }
261
+
262
+ // ——— main ———
263
+ console.log("🎨 VDS kuruluyor...\n");
166
264
 
167
265
  const projectRoot = getProjectRoot();
168
- const pkgPath = path.join(projectRoot, "package.json");
169
- if (!fs.existsSync(pkgPath)) {
266
+ const pkg = readPackageJson(projectRoot);
267
+ if (!pkg) {
170
268
  console.error("❌ Bu klasörde package.json bulunamadı.");
171
- console.error("VDS, mevcut bir React projesine kurulmalıdır.");
172
269
  process.exit(1);
173
270
  }
174
271
 
175
- // 1. Copy vds-core files
176
- ensureVdsCore(projectRoot);
177
-
178
- // 2. Install Storybook if not present
179
- if (!isStorybookInstalled(projectRoot)) {
272
+ // ADIM 1
273
+ if (needsStorybook(projectRoot)) {
180
274
  installStorybook(projectRoot);
181
275
  } else {
182
- console.log("📚 Storybook zaten mevcut.");
276
+ console.log("📚 Storybook zaten yüklü.");
183
277
  }
184
278
 
185
- // 3. Create/update .storybook/preview with index.css + dark decorator
186
- ensureStorybookPreview(projectRoot);
279
+ // ADIM 2
280
+ ensureStorybook(projectRoot);
281
+
282
+ // ADIM 3
283
+ ensureVdsCore(projectRoot);
187
284
 
188
- // 6. Add all scripts to package.json (before scan so scripts are there)
285
+ // ADIM 4
189
286
  addScripts(projectRoot);
190
- addVdsDependency(projectRoot);
191
287
 
192
- // 4. Run scan
193
- runScan(projectRoot);
288
+ // ADIM 5
289
+ ensureCursorrules(projectRoot);
290
+
291
+ // ADIM 6
292
+ ensureStoriesDir(projectRoot);
194
293
 
195
- // 5. Run story generator
294
+ // ADIM 9 (örnek dosyaları taramadan önce silebiliriz; scan src/components ve src/pages tarar, src/stories değil)
295
+ removeStorybookExamples(projectRoot);
296
+
297
+ // ADIM 7
298
+ runScan(projectRoot);
196
299
  runStoryGenerator(projectRoot);
197
300
 
198
- console.log("✅ Kurulum tamamlandı.");
199
- console.log(" Storybook: npm run storybook");
200
- console.log(" Dashboard: npm run vds:dashboard");
301
+ // ADIM 8
302
+ console.log("\n✅ VDS kuruldu!");
303
+ console.log("→ npm run storybook ile design system'ını aç");
304
+ console.log("→ npm run vds:watch ile otomatik güncellemeyi başlat\n");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vibe-design-system",
3
- "version": "1.9.12",
3
+ "version": "2.0.0",
4
4
  "description": "Auto-generate design systems for vibe coding projects",
5
5
  "type": "module",
6
6
  "bin": {