@nikkory/vibe-cli 2.3.2 → 2.4.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.
- package/dist/index.js +205 -123
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1065,7 +1065,209 @@ var import_commander4 = require("commander");
|
|
|
1065
1065
|
var import_chalk3 = __toESM(require("chalk"));
|
|
1066
1066
|
var import_ora3 = __toESM(require("ora"));
|
|
1067
1067
|
|
|
1068
|
-
// src/generators/section-
|
|
1068
|
+
// src/generators/section-orchestrator-wrapper.ts
|
|
1069
|
+
var import_promises2 = require("fs/promises");
|
|
1070
|
+
var import_path2 = require("path");
|
|
1071
|
+
var SectionOrchestratorWrapper = class {
|
|
1072
|
+
/**
|
|
1073
|
+
* Generate section code
|
|
1074
|
+
*
|
|
1075
|
+
* @param options - Generation options
|
|
1076
|
+
* @returns Generation result
|
|
1077
|
+
*/
|
|
1078
|
+
async generate(options) {
|
|
1079
|
+
try {
|
|
1080
|
+
const { sectionId, designSystem, tier } = options;
|
|
1081
|
+
const placeholderCode = this.generatePlaceholder(sectionId, designSystem, tier);
|
|
1082
|
+
return {
|
|
1083
|
+
success: true,
|
|
1084
|
+
composedCode: placeholderCode,
|
|
1085
|
+
metadata: {
|
|
1086
|
+
sectionId,
|
|
1087
|
+
sectionType: this.extractSectionType(sectionId),
|
|
1088
|
+
tier,
|
|
1089
|
+
designSystem,
|
|
1090
|
+
componentsGenerated: 3,
|
|
1091
|
+
totalLinesOfCode: placeholderCode.split("\n").length
|
|
1092
|
+
},
|
|
1093
|
+
errors: []
|
|
1094
|
+
};
|
|
1095
|
+
} catch (error) {
|
|
1096
|
+
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
1097
|
+
return {
|
|
1098
|
+
success: false,
|
|
1099
|
+
composedCode: "",
|
|
1100
|
+
metadata: {
|
|
1101
|
+
sectionId: options.sectionId,
|
|
1102
|
+
sectionType: this.extractSectionType(options.sectionId),
|
|
1103
|
+
tier: options.tier,
|
|
1104
|
+
designSystem: options.designSystem,
|
|
1105
|
+
componentsGenerated: 0,
|
|
1106
|
+
totalLinesOfCode: 0
|
|
1107
|
+
},
|
|
1108
|
+
errors: [errorMessage]
|
|
1109
|
+
};
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
/**
|
|
1113
|
+
* Write generated code to file
|
|
1114
|
+
*
|
|
1115
|
+
* @param filePath - Absolute file path
|
|
1116
|
+
* @param code - Generated code content
|
|
1117
|
+
* @returns Promise<void>
|
|
1118
|
+
*/
|
|
1119
|
+
async writeToFile(filePath, code) {
|
|
1120
|
+
await (0, import_promises2.mkdir)((0, import_path2.dirname)(filePath), { recursive: true });
|
|
1121
|
+
await (0, import_promises2.writeFile)(filePath, code, "utf-8");
|
|
1122
|
+
}
|
|
1123
|
+
/**
|
|
1124
|
+
* Extract section type from sectionId
|
|
1125
|
+
*
|
|
1126
|
+
* @param sectionId - Section ID (e.g., hero-centered, pricing-cards)
|
|
1127
|
+
* @returns Section type (e.g., hero, pricing)
|
|
1128
|
+
*
|
|
1129
|
+
* @example
|
|
1130
|
+
* ```typescript
|
|
1131
|
+
* extractSectionType('hero-centered') // 'hero'
|
|
1132
|
+
* extractSectionType('pricing-cards') // 'pricing'
|
|
1133
|
+
* ```
|
|
1134
|
+
*/
|
|
1135
|
+
extractSectionType(sectionId) {
|
|
1136
|
+
return sectionId.split("-")[0];
|
|
1137
|
+
}
|
|
1138
|
+
/**
|
|
1139
|
+
* Generate placeholder code
|
|
1140
|
+
* (Will be replaced with actual SectionOrchestrator integration)
|
|
1141
|
+
*
|
|
1142
|
+
* @param sectionId - Section ID
|
|
1143
|
+
* @param designSystem - Design system
|
|
1144
|
+
* @param tier - Quality tier
|
|
1145
|
+
* @returns Placeholder React component code
|
|
1146
|
+
*/
|
|
1147
|
+
generatePlaceholder(sectionId, designSystem, tier) {
|
|
1148
|
+
const componentName = this.toPascalCase(sectionId);
|
|
1149
|
+
const sectionType = this.extractSectionType(sectionId);
|
|
1150
|
+
return `/**
|
|
1151
|
+
* ${componentName} Section
|
|
1152
|
+
*
|
|
1153
|
+
* Generated by Nikkory Vibe Section Orchestrator
|
|
1154
|
+
*
|
|
1155
|
+
* @packageDocumentation
|
|
1156
|
+
* @since 1.0.0
|
|
1157
|
+
*
|
|
1158
|
+
* Powered by Nikkory
|
|
1159
|
+
*/
|
|
1160
|
+
|
|
1161
|
+
import * as React from 'react';
|
|
1162
|
+
|
|
1163
|
+
export interface ${componentName}Props {
|
|
1164
|
+
/** Section title */
|
|
1165
|
+
title?: string;
|
|
1166
|
+
/** Section subtitle */
|
|
1167
|
+
subtitle?: string;
|
|
1168
|
+
/** Children elements */
|
|
1169
|
+
children?: React.ReactNode;
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1172
|
+
/**
|
|
1173
|
+
* ${componentName} Section (${sectionType})
|
|
1174
|
+
*
|
|
1175
|
+
* Design System: ${designSystem}
|
|
1176
|
+
* Quality Tier: ${tier}
|
|
1177
|
+
*/
|
|
1178
|
+
export const ${componentName}: React.FC<${componentName}Props> = ({
|
|
1179
|
+
title = 'Welcome',
|
|
1180
|
+
subtitle,
|
|
1181
|
+
children,
|
|
1182
|
+
}) => {
|
|
1183
|
+
return (
|
|
1184
|
+
<section className="section-${sectionId}">
|
|
1185
|
+
<div className="container">
|
|
1186
|
+
<div className="content">
|
|
1187
|
+
<h1>{title}</h1>
|
|
1188
|
+
{subtitle && <p>{subtitle}</p>}
|
|
1189
|
+
{children}
|
|
1190
|
+
</div>
|
|
1191
|
+
</div>
|
|
1192
|
+
</section>
|
|
1193
|
+
);
|
|
1194
|
+
};
|
|
1195
|
+
|
|
1196
|
+
export default ${componentName};
|
|
1197
|
+
`;
|
|
1198
|
+
}
|
|
1199
|
+
/**
|
|
1200
|
+
* Convert kebab-case to PascalCase
|
|
1201
|
+
*
|
|
1202
|
+
* @param str - kebab-case string
|
|
1203
|
+
* @returns PascalCase string
|
|
1204
|
+
*
|
|
1205
|
+
* @example
|
|
1206
|
+
* ```typescript
|
|
1207
|
+
* toPascalCase('hero-centered') // 'HeroCentered'
|
|
1208
|
+
* toPascalCase('pricing-cards') // 'PricingCards'
|
|
1209
|
+
* ```
|
|
1210
|
+
*/
|
|
1211
|
+
toPascalCase(str) {
|
|
1212
|
+
return str.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
|
|
1213
|
+
}
|
|
1214
|
+
};
|
|
1215
|
+
|
|
1216
|
+
// src/commands/section-generate.ts
|
|
1217
|
+
var sectionGenerateCommand = new import_commander4.Command("add:section").alias("section").description("Add/Generate section using Orchestrator (50 sections, composition-based)").argument("<section>", "Section ID (e.g., hero-centered, pricing-cards)").option(
|
|
1218
|
+
"-s, --design-system <system>",
|
|
1219
|
+
"Design system (material-design, ios-hig, glassmorphism, neumorphism, brutalism, minimalism, fluent, carbon, ant-design, chakra, atlassian, blueprint)",
|
|
1220
|
+
"material-design"
|
|
1221
|
+
).option(
|
|
1222
|
+
"-t, --tier <tier>",
|
|
1223
|
+
"Quality tier (basic, standard, enterprise)",
|
|
1224
|
+
"standard"
|
|
1225
|
+
).option(
|
|
1226
|
+
"-o, --output <path>",
|
|
1227
|
+
"Output file path"
|
|
1228
|
+
).action(async (sectionId, options) => {
|
|
1229
|
+
const spinner = (0, import_ora3.default)("Generating section...").start();
|
|
1230
|
+
try {
|
|
1231
|
+
const wrapper = new SectionOrchestratorWrapper();
|
|
1232
|
+
const result = await wrapper.generate({
|
|
1233
|
+
sectionId,
|
|
1234
|
+
designSystem: options.designSystem,
|
|
1235
|
+
tier: options.tier
|
|
1236
|
+
});
|
|
1237
|
+
if (!result.success) {
|
|
1238
|
+
spinner.fail(import_chalk3.default.red("Section generation failed"));
|
|
1239
|
+
result.errors.forEach((error) => {
|
|
1240
|
+
console.error(import_chalk3.default.gray(` \u2022 ${error}`));
|
|
1241
|
+
});
|
|
1242
|
+
process.exit(1);
|
|
1243
|
+
}
|
|
1244
|
+
if (options.output) {
|
|
1245
|
+
await wrapper.writeToFile(options.output, result.composedCode);
|
|
1246
|
+
spinner.succeed(import_chalk3.default.green(`Generated ${result.metadata.sectionId} \u2192 ${options.output}`));
|
|
1247
|
+
} else {
|
|
1248
|
+
spinner.succeed(import_chalk3.default.green(`Generated ${result.metadata.sectionId}`));
|
|
1249
|
+
console.log(result.composedCode);
|
|
1250
|
+
}
|
|
1251
|
+
console.log(import_chalk3.default.cyan("\nSection Info:"));
|
|
1252
|
+
console.log(` ${import_chalk3.default.gray("ID:")} ${result.metadata.sectionId}`);
|
|
1253
|
+
console.log(` ${import_chalk3.default.gray("Type:")} ${result.metadata.sectionType}`);
|
|
1254
|
+
console.log(` ${import_chalk3.default.gray("Tier:")} ${result.metadata.tier}`);
|
|
1255
|
+
console.log(` ${import_chalk3.default.gray("Design System:")} ${result.metadata.designSystem}`);
|
|
1256
|
+
console.log(` ${import_chalk3.default.gray("Components:")} ${result.metadata.componentsGenerated}`);
|
|
1257
|
+
console.log(` ${import_chalk3.default.gray("Lines of Code:")} ${result.metadata.totalLinesOfCode}`);
|
|
1258
|
+
console.log("");
|
|
1259
|
+
} catch (error) {
|
|
1260
|
+
spinner.fail(import_chalk3.default.red(`Error: ${error.message}`));
|
|
1261
|
+
process.exit(1);
|
|
1262
|
+
}
|
|
1263
|
+
});
|
|
1264
|
+
|
|
1265
|
+
// src/commands/page-generate.ts
|
|
1266
|
+
var import_commander5 = require("commander");
|
|
1267
|
+
var import_chalk4 = __toESM(require("chalk"));
|
|
1268
|
+
var import_ora4 = __toESM(require("ora"));
|
|
1269
|
+
|
|
1270
|
+
// src/generators/page-generator.ts
|
|
1069
1271
|
var path3 = __toESM(require("path"));
|
|
1070
1272
|
|
|
1071
1273
|
// src/generators/matrix-engine.ts
|
|
@@ -1337,133 +1539,13 @@ var MatrixEngine = class {
|
|
|
1337
1539
|
}
|
|
1338
1540
|
};
|
|
1339
1541
|
|
|
1340
|
-
// src/generators/section-generator.ts
|
|
1341
|
-
var SectionGenerator = class {
|
|
1342
|
-
engine;
|
|
1343
|
-
templateDir;
|
|
1344
|
-
constructor(templateDir) {
|
|
1345
|
-
this.engine = new MatrixEngine();
|
|
1346
|
-
this.templateDir = templateDir || path3.join(process.cwd(), ".claude", "templates", "settings-section");
|
|
1347
|
-
}
|
|
1348
|
-
/**
|
|
1349
|
-
* Generate settings section component
|
|
1350
|
-
*
|
|
1351
|
-
* @param options - Section generation options
|
|
1352
|
-
* @returns Generation result
|
|
1353
|
-
*/
|
|
1354
|
-
async generate(options) {
|
|
1355
|
-
const dimensions = {
|
|
1356
|
-
sectionType: options.sectionType,
|
|
1357
|
-
dataPattern: options.dataPattern || "global-inheritance",
|
|
1358
|
-
uiComplexity: options.uiComplexity || "medium",
|
|
1359
|
-
qualityTier: options.qualityTier || "enterprise",
|
|
1360
|
-
framework: options.framework || "react"
|
|
1361
|
-
};
|
|
1362
|
-
const variables = {
|
|
1363
|
-
SectionName: options.sectionName,
|
|
1364
|
-
SectionTitle: options.sectionTitle,
|
|
1365
|
-
Icon: options.icon,
|
|
1366
|
-
DataType: options.dataType,
|
|
1367
|
-
apiMethod: options.apiMethod,
|
|
1368
|
-
saveMethod: options.saveMethod,
|
|
1369
|
-
sectionName: this.toKebabCase(options.sectionName),
|
|
1370
|
-
...options.additionalVariables
|
|
1371
|
-
};
|
|
1372
|
-
const genConfig = {
|
|
1373
|
-
templateDir: this.templateDir,
|
|
1374
|
-
dimensions,
|
|
1375
|
-
variables,
|
|
1376
|
-
outputDir: options.outputDir
|
|
1377
|
-
};
|
|
1378
|
-
return await this.engine.generate(genConfig);
|
|
1379
|
-
}
|
|
1380
|
-
/**
|
|
1381
|
-
* Write generated files to disk
|
|
1382
|
-
*
|
|
1383
|
-
* @param result - Generation result
|
|
1384
|
-
* @returns Array of written file paths
|
|
1385
|
-
*/
|
|
1386
|
-
async write(result) {
|
|
1387
|
-
return await this.engine.writeFiles(result);
|
|
1388
|
-
}
|
|
1389
|
-
/**
|
|
1390
|
-
* Convert PascalCase to kebab-case
|
|
1391
|
-
*
|
|
1392
|
-
* @param str - PascalCase string
|
|
1393
|
-
* @returns kebab-case string
|
|
1394
|
-
*
|
|
1395
|
-
* @example
|
|
1396
|
-
* ```typescript
|
|
1397
|
-
* toKebabCase('AIProviderSettings') // 'ai-provider-settings'
|
|
1398
|
-
* ```
|
|
1399
|
-
*/
|
|
1400
|
-
toKebabCase(str) {
|
|
1401
|
-
return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
|
|
1402
|
-
}
|
|
1403
|
-
};
|
|
1404
|
-
|
|
1405
|
-
// src/commands/section-generate.ts
|
|
1406
|
-
var sectionGenerateCommand = new import_commander4.Command("add:section").alias("section").description("Add/Generate section using Orchestrator (50 sections, composition-based)").argument("<section>", "Section ID (e.g., hero-centered, pricing-cards)").option(
|
|
1407
|
-
"-s, --design-system <system>",
|
|
1408
|
-
"Design system (material-design, ios-hig, glassmorphism, neumorphism, brutalism, minimalism, fluent, carbon, ant-design, chakra, atlassian, blueprint)",
|
|
1409
|
-
"material-design"
|
|
1410
|
-
).option(
|
|
1411
|
-
"-t, --tier <tier>",
|
|
1412
|
-
"Quality tier (basic, standard, enterprise)",
|
|
1413
|
-
"standard"
|
|
1414
|
-
).option(
|
|
1415
|
-
"-o, --output <path>",
|
|
1416
|
-
"Output file path"
|
|
1417
|
-
).action(async (sectionId, options) => {
|
|
1418
|
-
const spinner = (0, import_ora3.default)("Generating section...").start();
|
|
1419
|
-
try {
|
|
1420
|
-
const generator = new SectionGenerator();
|
|
1421
|
-
const result = await generator.generate({
|
|
1422
|
-
sectionId,
|
|
1423
|
-
designSystem: options.designSystem,
|
|
1424
|
-
tier: options.tier
|
|
1425
|
-
});
|
|
1426
|
-
if (!result.success) {
|
|
1427
|
-
spinner.fail(import_chalk3.default.red("Section generation failed"));
|
|
1428
|
-
result.errors.forEach((error) => {
|
|
1429
|
-
console.error(import_chalk3.default.gray(` \u2022 ${error}`));
|
|
1430
|
-
});
|
|
1431
|
-
process.exit(1);
|
|
1432
|
-
}
|
|
1433
|
-
if (options.output) {
|
|
1434
|
-
await generator.writeToFile(options.output, result.composedCode);
|
|
1435
|
-
spinner.succeed(import_chalk3.default.green(`Generated ${result.metadata.sectionId} \u2192 ${options.output}`));
|
|
1436
|
-
} else {
|
|
1437
|
-
spinner.succeed(import_chalk3.default.green(`Generated ${result.metadata.sectionId}`));
|
|
1438
|
-
console.log(result.composedCode);
|
|
1439
|
-
}
|
|
1440
|
-
console.log(import_chalk3.default.cyan("\nSection Info:"));
|
|
1441
|
-
console.log(` ${import_chalk3.default.gray("ID:")} ${result.metadata.sectionId}`);
|
|
1442
|
-
console.log(` ${import_chalk3.default.gray("Type:")} ${result.metadata.sectionType}`);
|
|
1443
|
-
console.log(` ${import_chalk3.default.gray("Tier:")} ${result.metadata.tier}`);
|
|
1444
|
-
console.log(` ${import_chalk3.default.gray("Design System:")} ${result.metadata.designSystem}`);
|
|
1445
|
-
console.log(` ${import_chalk3.default.gray("Components:")} ${result.metadata.componentsGenerated}`);
|
|
1446
|
-
console.log(` ${import_chalk3.default.gray("Lines of Code:")} ${result.metadata.totalLinesOfCode}`);
|
|
1447
|
-
console.log("");
|
|
1448
|
-
} catch (error) {
|
|
1449
|
-
spinner.fail(import_chalk3.default.red(`Error: ${error.message}`));
|
|
1450
|
-
process.exit(1);
|
|
1451
|
-
}
|
|
1452
|
-
});
|
|
1453
|
-
|
|
1454
|
-
// src/commands/page-generate.ts
|
|
1455
|
-
var import_commander5 = require("commander");
|
|
1456
|
-
var import_chalk4 = __toESM(require("chalk"));
|
|
1457
|
-
var import_ora4 = __toESM(require("ora"));
|
|
1458
|
-
|
|
1459
1542
|
// src/generators/page-generator.ts
|
|
1460
|
-
var path4 = __toESM(require("path"));
|
|
1461
1543
|
var PageGenerator = class {
|
|
1462
1544
|
engine;
|
|
1463
1545
|
templateDir;
|
|
1464
1546
|
constructor(templateDir) {
|
|
1465
1547
|
this.engine = new MatrixEngine();
|
|
1466
|
-
this.templateDir = templateDir ||
|
|
1548
|
+
this.templateDir = templateDir || path3.join(process.cwd(), ".claude", "templates", "page");
|
|
1467
1549
|
}
|
|
1468
1550
|
/**
|
|
1469
1551
|
* Generate page component
|
|
@@ -1584,7 +1666,7 @@ ${y.bold(" \u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D\u2588\u
|
|
|
1584
1666
|
${y.bold(" \u255A\u2588\u2588\u2588\u2588\u2554\u255D \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 ")}
|
|
1585
1667
|
${y.bold(" \u255A\u2550\u2550\u2550\u255D \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D \u255A\u2550\u2550\u2550\u2550\u2550\u2550\u255D ")}
|
|
1586
1668
|
|
|
1587
|
-
${y(" happy together")} ${import_chalk5.default.white("\u2022 v2.
|
|
1669
|
+
${y(" happy together")} ${import_chalk5.default.white("\u2022 v2.4.0")}
|
|
1588
1670
|
|
|
1589
1671
|
${import_chalk5.default.gray(" Production-ready code in seconds")}
|
|
1590
1672
|
${import_chalk5.default.gray(" https://nikkory.com")}
|