-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcli.js
More file actions
executable file
·348 lines (311 loc) · 13.1 KB
/
cli.js
File metadata and controls
executable file
·348 lines (311 loc) · 13.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
#!/usr/bin/env node
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';
import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'fs';
import { execSync } from 'child_process';
import inquirer from 'inquirer';
import chalk from 'chalk';
import fs from 'fs-extra';
import { parseArgs } from 'node:util';
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const TEMPLATES_DIR = join(__dirname, 'templates');
// Validate cloud name format
function isValidCloudName(name) {
return /^[a-z0-9_-]+$/.test(name) && name.length > 0;
}
// Validate project name
function isValidProjectName(name) {
return /^[a-z0-9_-]+$/i.test(name) && name.length > 0;
}
async function main() {
let answers = {};
if (process.argv.includes('--headless')) {
const { values, positionals } = parseArgs({
options: {
headless: {
type: 'boolean'
},
projectName: {
type: 'string',
default: 'my-cloudinary-app'
},
cloudName: {
type: 'string'
},
hasUploadPreset: {
type: 'boolean',
default: false
},
uploadPreset: {
type: 'string'
},
aiTools: {
type: 'string',
multiple: true,
default: ['cursor']
},
installDeps: {
type: 'boolean',
default: true
},
startDev: {
type: 'boolean',
default: false
}
}
});
Object.assign(answers, values);
} else {
console.log(chalk.cyan.bold('\n🚀 Cloudinary React Starter Kit\n'));
console.log(chalk.gray('💡 Need a Cloudinary account? Sign up for free: https://cld.media/reactregister\n'));
const questions = [
{
type: 'input',
name: 'projectName',
message: 'What’s your project’s name?\n',
default: 'my-cloudinary-app',
validate: (input) => {
if (!input.trim()) {
return 'Project name cannot be empty';
}
if (!isValidProjectName(input)) {
return 'Project name can only contain letters, numbers, hyphens, and underscores';
}
if (existsSync(input)) {
return `Directory "${input}" already exists. Please choose a different name.`;
}
return true;
},
},
{
type: 'input',
name: 'cloudName',
message:
'What’s your Cloudinary cloud name?\n' +
chalk.gray(' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard') + '\n',
validate: (input) => {
if (!input.trim()) {
return chalk.yellow(
'Cloud name is required.\n' +
' → Sign up: https://cld.media/reactregister\n' +
' → Find your cloud name: https://console.cloudinary.com/app/home/dashboard'
);
}
if (!isValidCloudName(input)) {
return 'Cloud name can only contain lowercase letters, numbers, hyphens, and underscores';
}
return true;
},
},
{
type: 'confirm',
name: 'hasUploadPreset',
message:
'Do you have an unsigned upload preset?\n' +
chalk.gray(' → You’ll need one if you want to upload new images to Cloudinary,\n but not if you only want to transform or deliver existing images.') + '\n' +
chalk.gray(' → Create one here: https://console.cloudinary.com/app/settings/upload/presets') + '\n',
default: false,
},
{
type: 'input',
name: 'uploadPreset',
message: 'What’s your unsigned upload preset’s name?\n',
when: (answers) => answers.hasUploadPreset,
validate: (input) => {
if (!input.trim()) {
return 'Upload preset name cannot be empty';
}
return true;
},
},
{
type: 'checkbox',
name: 'aiTools',
message:
'Which AI coding assistant(s) are you using? (Select all that apply)\n' +
chalk.gray(' We’ll add local instruction files so your assistant knows Cloudinary patterns.\n'),
choices: [
{ name: 'Cursor', value: 'cursor' },
{ name: 'GitHub Copilot', value: 'copilot' },
{ name: 'Claude Code', value: 'claude' },
{ name: 'Other / Generic AI tools', value: 'generic' },
],
default: ['cursor'],
},
{
type: 'confirm',
name: 'installDeps',
message: 'Install dependencies now?\n',
default: true,
},
{
type: 'confirm',
name: 'startDev',
message: 'Start development server?\n',
default: false,
when: (answers) => answers.installDeps,
},
];
answers = await inquirer.prompt(questions);
}
const { projectName, cloudName, uploadPreset, aiTools, installDeps, startDev } = answers;
console.log(chalk.blue('\n📦 Creating project...\n'));
// Create project directory
const projectPath = join(process.cwd(), projectName);
mkdirSync(projectPath, { recursive: true });
// Template replacement function
function replaceTemplate(content, vars) {
let result = content;
Object.keys(vars).forEach((key) => {
const regex = new RegExp(`\\{\\{${key}\\}\\}`, 'g');
result = result.replace(regex, vars[key]);
});
return result;
}
// Template variables
const templateVars = {
PROJECT_NAME: projectName,
CLOUD_NAME: cloudName,
UPLOAD_PRESET: uploadPreset || '',
UPLOAD_PRESET_ENV_LINE: uploadPreset
? `- \`VITE_CLOUDINARY_UPLOAD_PRESET\`: ${uploadPreset}`
: '- `VITE_CLOUDINARY_UPLOAD_PRESET`: (not set - add one for uploads)',
};
// Function to copy template file
function copyTemplate(relativePath, outputPath = null) {
const templatePath = join(TEMPLATES_DIR, relativePath);
const finalPath = outputPath || join(projectPath, relativePath.replace('.template', ''));
// Create directory if needed
const finalDir = dirname(finalPath);
if (!existsSync(finalDir)) {
mkdirSync(finalDir, { recursive: true });
}
if (existsSync(templatePath)) {
const content = readFileSync(templatePath, 'utf-8');
const processed = replaceTemplate(content, templateVars);
writeFileSync(finalPath, processed);
}
}
// Copy all template files
const filesToCopy = [
'package.json.template',
'vite.config.ts.template',
'tsconfig.json.template',
'tsconfig.app.json.template',
'tsconfig.node.json.template',
'eslint.config.js.template',
'.gitignore.template',
'.env.template',
'index.html.template',
'README.md.template',
'src/cloudinary/config.ts.template',
'src/cloudinary/UploadWidget.tsx.template',
'src/App.tsx.template',
'src/main.tsx.template',
'src/index.css.template',
'src/App.css.template',
];
filesToCopy.forEach((file) => {
copyTemplate(file);
});
// Create AI rules based on user's tool selection
const aiRulesTemplatePath = join(TEMPLATES_DIR, '.cursorrules.template');
if (existsSync(aiRulesTemplatePath) && aiTools && aiTools.length > 0) {
const aiRulesContent = replaceTemplate(
readFileSync(aiRulesTemplatePath, 'utf-8'),
templateVars
);
// Generate files based on selected tools
if (aiTools.includes('cursor')) {
writeFileSync(join(projectPath, '.cursorrules'), aiRulesContent);
}
if (aiTools.includes('copilot')) {
const githubDir = join(projectPath, '.github');
mkdirSync(githubDir, { recursive: true });
writeFileSync(join(githubDir, 'copilot-instructions.md'), aiRulesContent);
}
if (aiTools.includes('claude')) {
writeFileSync(join(projectPath, 'CLAUDE.md'), aiRulesContent);
}
if (aiTools.includes('generic')) {
writeFileSync(join(projectPath, 'AI_INSTRUCTIONS.md'), aiRulesContent);
writeFileSync(join(projectPath, 'PROMPT.md'), aiRulesContent);
}
// Generate MCP configuration: Cursor uses .cursor/mcp.json, Claude Code uses .mcp.json in project root
const mcpTemplatePath = join(TEMPLATES_DIR, '.cursor/mcp.json.template');
if (existsSync(mcpTemplatePath)) {
const mcpContent = replaceTemplate(
readFileSync(mcpTemplatePath, 'utf-8'),
templateVars
);
if (aiTools.includes('cursor')) {
const cursorDir = join(projectPath, '.cursor');
mkdirSync(cursorDir, { recursive: true });
writeFileSync(join(cursorDir, 'mcp.json'), mcpContent);
}
if (aiTools.includes('claude')) {
writeFileSync(join(projectPath, '.mcp.json'), mcpContent);
}
}
}
// Copy vite.svg to public directory
const viteSvgPath = join(projectPath, 'public', 'vite.svg');
mkdirSync(join(projectPath, 'public'), { recursive: true });
const viteSvg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>';
writeFileSync(viteSvgPath, viteSvg);
console.log(chalk.green('✅ Project created successfully!\n'));
if (aiTools && aiTools.length > 0) {
console.log(chalk.cyan('📋 AI assistant files created:'));
if (aiTools.includes('cursor')) console.log(chalk.gray(' • Cursor: .cursorrules'));
if (aiTools.includes('copilot')) console.log(chalk.gray(' • GitHub Copilot: .github/copilot-instructions.md'));
if (aiTools.includes('claude')) console.log(chalk.gray(' • Claude: CLAUDE.md'));
if (aiTools.includes('generic')) console.log(chalk.gray(' • Generic: AI_INSTRUCTIONS.md, PROMPT.md'));
if (aiTools.includes('cursor')) console.log(chalk.gray(' • MCP (Cursor): .cursor/mcp.json'));
if (aiTools.includes('claude')) console.log(chalk.gray(' • MCP (Claude Code): .mcp.json'));
console.log('');
}
if (!answers.hasUploadPreset) {
console.log(chalk.yellow('\n📝 Note: Upload preset not configured'));
console.log(chalk.gray(' • Transformations will work with sample images'));
console.log(chalk.gray(' • Uploads require an unsigned upload preset'));
console.log(chalk.cyan('\n To enable uploads:'));
console.log(chalk.cyan(' 1. Go to https://console.cloudinary.com/app/settings/upload/presets'));
console.log(chalk.cyan(' 2. Click "Add upload preset"'));
console.log(chalk.cyan(' 3. Set it to "Unsigned" mode'));
console.log(chalk.cyan(' 4. Add the preset name to your .env file'));
console.log(chalk.cyan(' 5. Save the file and restart the dev server so it loads correctly\n'));
}
if (installDeps) {
console.log(chalk.blue('📦 Installing dependencies...\n'));
try {
process.chdir(projectPath);
execSync('npm install', { stdio: 'inherit' });
console.log(chalk.green('\n✅ Dependencies installed!\n'));
if (startDev) {
console.log(chalk.blue('🚀 Starting development server...\n'));
execSync('npm run dev', { stdio: 'inherit' });
} else {
console.log(chalk.cyan(`\n📁 Project created at: ${projectPath}`));
console.log(chalk.cyan(`\nNext steps:`));
console.log(chalk.cyan(` cd ${projectName}`));
console.log(chalk.cyan(` npm run dev\n`));
}
} catch (error) {
console.error(chalk.red('\n❌ Error installing dependencies:'), error.message);
console.log(chalk.cyan(`\nYou can install manually:`));
console.log(chalk.cyan(` cd ${projectName}`));
console.log(chalk.cyan(` npm install\n`));
}
} else {
console.log(chalk.cyan(`\n📁 Project created at: ${projectPath}`));
console.log(chalk.cyan(`\nNext steps:`));
console.log(chalk.cyan(` cd ${projectName}`));
console.log(chalk.cyan(` npm install`));
console.log(chalk.cyan(` npm run dev\n`));
}
}
main().catch((error) => {
console.error(chalk.red('❌ Error:'), error.message);
process.exit(1);
});