vk-typescript-cli 1.0.0

package/src/commands/new.js

@@ -0,0 +1,264 @@
+import path from 'node:path';
+import { select } from '../../lib/inquirer-prompts.js';
+import { TEMPLATES } from '../constants.js';
+import { createReactProject } from '../generators/react.js';
+import { createNextJsProject } from '../generators/nextjs.js';
+import { createAngularProject } from '../generators/angular.js';
+import { createVueProject } from '../generators/vue.js';
+import { createTypeScriptProject } from '../generators/typescript.js';
+import { logger } from '../utils/logger.js';
+import {
+  applyMcpIntegration
+} from '../utils/mcp-generator.js';
+import {
+  installSkills,
+  promptSkillsInstallMode
+} from '../utils/skills-installer.js';
+import { updateSyncfusionConfig } from '../utils/config-generator.js';
+import { promptAndBootstrap } from '../utils/project-bootstrap.js';
+import { safePrompt } from '../utils/prompt-utils.js';
+
+async function promptMcpEditorSelection() {
+  const editor = await safePrompt(select, {
+    message: 'Which editor do you want to add MCP configuration for?',
+    choices: [
+      { name: 'All Editors', value: 'all' },
+      { name: 'VS Code', value: 'vscode' },
+      { name: 'Code Studio', value: 'code-studio' },
+      { name: 'Cursor', value: 'cursor' },
+      { name: 'JetBrains', value: 'jetbrains' }
+    ],
+    default: 'all'
+  });
+
+  if (!editor) {
+    logger.warning('\n⚠️  MCP configuration cancelled.\n');
+    return [];
+  }
+
+  return [editor];
+}
+
+export async function createNewCommand(framework, appName, options = {}) {
+  const appPath = path.resolve(process.cwd(), appName);
+
+  try {
+    // Validate inputs
+    if (!appName || appName.trim() === '') {
+      logger.error('Application name is required');
+      process.exit(1);
+    }
+
+    // Normalize framework name (remove -app suffix if present)
+    const normalizedFramework = (framework || options.framework || 'react').toLowerCase();
+
+    const requestedType = (options.ts ? 'ts' : options.js ? 'js' : options.type || options.language || 'ts').toLowerCase();
+    const typeAliases = { ts: 'typescript', js: 'javascript' };
+    const type = typeAliases[requestedType] || requestedType;
+    const template = (options.template || TEMPLATES.EMPTY).toLowerCase();
+    const theme = (options.theme || 'material3').toLowerCase();
+    const buildTool = (options.buildTool || 'vite').toLowerCase();
+    const styling = (options.styling || 'css').toLowerCase();
+
+    // Determine which generator to use
+    let generator;
+    switch (normalizedFramework) {
+      case 'react':
+        if (buildTool === 'nextjs') {
+          generator = createNextJsProject;
+        } else {
+          generator = createReactProject;
+        }
+        break;
+
+      case 'angular':
+        generator = createAngularProject;
+        break;
+      case 'vue':
+        generator = createVueProject;
+        break;
+      case 'typescript':
+        generator = createTypeScriptProject;
+        break;
+
+      default:
+        logger.error(`Unsupported framework: ${normalizedFramework}`);
+        logger.info('Supported frameworks: react, angular, vue, typescript');
+        process.exit(1);
+    }
+
+    // Validate buildTool (only for React)
+    if (normalizedFramework === 'react') {
+      const validBuildTools = ['vite', 'nextjs'];
+      if (!validBuildTools.includes(buildTool)) {
+        logger.error(`Invalid build tool: ${buildTool}`);
+        logger.info(`Supported build tools: ${validBuildTools.join(', ')}`);
+        process.exit(1);
+      }
+    } else if (normalizedFramework === 'typescript') {
+      // TypeScript platform has no separate build-tool option (Vite is hard-wired).
+      buildTool = null;
+    }
+
+    // Validate styling
+    if (!['css', 'scss'].includes(styling)) {
+      logger.error(`Invalid styling: ${styling}`);
+      logger.info('Supported styling: css, scss');
+      process.exit(1);
+    }
+
+    // Validate template
+    if (!Object.values(TEMPLATES).includes(template)) {
+      logger.error(`Invalid template: ${template}`);
+      logger.info(`Supported templates: ${Object.values(TEMPLATES).join(', ')}`);
+      process.exit(1);
+    }
+
+    // Validate type
+    if (normalizedFramework === 'typescript') {
+      // The TypeScript platform is always TypeScript.
+      if (type !== 'typescript' && type !== 'ts') {
+        logger.error('TypeScript platform only supports TypeScript (ts)');
+        process.exit(1);
+      }
+    } else if (normalizedFramework !== 'angular') {
+      if (!['javascript', 'typescript'].includes(type)) {
+        logger.error(`Invalid type: ${type}`);
+        logger.info('Supported types: js, ts');
+        process.exit(1);
+      }
+    }
+
+    // Validate theme
+    const validThemes = ['tailwind3', 'bootstrap5.3', 'fluent2', 'material3'];
+    if (!validThemes.includes(theme)) {
+      logger.warning(`Unknown theme: ${theme}, using material3 instead`);
+    }
+
+    // Merge all options
+    const mergedOptions = {
+      framework: normalizedFramework,
+      type,
+      buildTool: normalizedFramework === 'react' ? buildTool : null,
+      appType: type === 'typescript' ? 'ts' : 'js',
+      template,
+      theme: validThemes.includes(theme) ? theme : 'material3',
+      styling,
+      empty: template === TEMPLATES.EMPTY,
+      ...options
+    };
+
+    // For the TypeScript platform, ensure the build tool is always null
+    // (it always uses Vite internally and we don't expose a separate flag).
+    if (normalizedFramework === 'typescript') {
+      mergedOptions.buildTool = null;
+      mergedOptions.appType = 'ts';
+      mergedOptions.type = 'typescript';
+    }
+
+    let mcpResult;
+    if ((options.mcp ?? options.mcp) === true) {
+      mcpResult = {
+        deferred: true,
+        editors: options.mcpEditors || ['all']
+      };
+    } else {
+      mcpResult = { integrated: false, editors: [] };
+    }
+
+    let skillsResult;
+    if ((options.skills ?? options.skills) === true) {
+      skillsResult = { deferred: true };
+    } else {
+      skillsResult = { installed: false };
+    }
+
+    let bootstrapOptions = { skip: false, force: false, deferred: false};
+    if (options.noStart) {
+      bootstrapOptions = { skip: true, force: false, deferred: true };
+    } else if (options.start) {
+      bootstrapOptions = { skip: false, force: true, deferred: true };
+    } else if (options.yes) {
+      bootstrapOptions = { skip: true, force: false, deferred: true };
+    }
+
+    logger.info(`\n🚀 Creating Syncfusion ${normalizedFramework} project...\n`);
+
+    await generator(appName, appPath, mergedOptions);
+
+    // Ask after project creation and immediately before applying MCP.
+    if (mcpResult?.deferred && options.promptMcpEditor) {
+      const selectedEditors = await promptMcpEditorSelection();
+      if (selectedEditors.length === 0) {
+        mcpResult = { integrated: false, editors: [] };
+      } else {
+        mcpResult.editors = selectedEditors;
+      }
+    }
+
+    if (mcpResult?.deferred || mcpResult?.integrated) {
+      const editors = mcpResult.editors || ['all'];
+      mcpResult = await applyMcpIntegration(
+        appPath,
+        mergedOptions.framework,
+        editors
+      );
+    }
+
+    if (skillsResult?.deferred || skillsResult?.installed) {
+      let allSkills = true;
+      if (options.promptSkillsInstallMode) {
+        const skillsMode = await promptSkillsInstallMode();
+        if (!skillsMode) {
+          skillsResult = { installed: false };
+        } else {
+          allSkills = skillsMode === 'all';
+          const installed = await installSkills(appPath, mergedOptions.framework, { allSkills });
+          skillsResult = { installed };
+        }
+      } else {
+        const installed = await installSkills(appPath, mergedOptions.framework, { allSkills });
+        skillsResult = { installed };
+      }
+    }
+
+    try {
+      await updateSyncfusionConfig(appPath, { mcp: mcpResult, skills: skillsResult });
+    } catch (error) {
+      logger.warning(
+        `⚠️ Failed to update syncfusion.config.json: ${error.message}`
+      );
+    }
+     // Success message
+    logger.success('\n✅ Project created successfully!\n');
+    logger.info(`📁 Project Name:     ${appName}`);
+    logger.info(`🎯 Framework:        ${mergedOptions.framework}`);
+    if (mergedOptions.buildTool) {
+      logger.info(`🔧 Build Tool:       ${mergedOptions.buildTool}`);
+    }
+    logger.info(`📝 Type:             ${mergedOptions.type}`);
+    logger.info(`🎨 Template:         ${mergedOptions.template}`);
+    logger.info(`🌈 Theme:            ${mergedOptions.theme}`);
+    logger.info(`💅 Styling:          ${mergedOptions.styling.toUpperCase()}`);
+    if (mcpResult?.integrated) {
+      logger.info('🤖 MCP: Added');
+    }
+
+    if (skillsResult?.installed) {
+      logger.info('🧠 Skills: Added');
+    }
+    if (bootstrapOptions.deferred) {
+      await promptAndBootstrap(
+        appPath,
+        appName,
+        mergedOptions.framework,
+        mergedOptions.buildTool,
+        { skip: bootstrapOptions.skip, force: bootstrapOptions.force }
+      );
+    }
+  } catch (error) {
+    logger.error(`❌ Failed to create project: ${error.message}`);
+    console.error(error);
+    process.exit(1);
+  }
+}

package/src/commands/skills.js

@@ -0,0 +1,42 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { logger } from '../utils/logger.js';
+import { requireSyncfusionProject } from '../utils/project-detector.js';
+import { updateSyncfusionConfig } from '../utils/config-generator.js';
+import { installSkills, promptSkillsInstallMode } from '../utils/skills-installer.js';
+
+/**
+ * `sf skills install` — install Syncfusion component skills for AI
+ * coding skills into the current project.
+ */
+export async function skillsAddCommand(options = {}) {
+  const project = await requireSyncfusionProject(process.cwd());
+  if (!project) process.exit(1);
+
+  const configPath = path.join(project.root, 'syncfusion.config.json');
+  const config = await readFile(configPath, 'utf8').then(JSON.parse).catch(() => ({}));
+
+  if (config.skills?.installed === true) {
+    logger.info('\nℹ️  Skills already added. Skipping.\n');
+    return;
+  }
+  let allSkills = true;
+  if (options.promptInstallMode) {
+    const mode = await promptSkillsInstallMode();
+    if (!mode) return;
+    allSkills = mode === 'all';
+  }
+
+  const installed = await installSkills(project.root, project.framework, { allSkills });
+
+  try {
+    await updateSyncfusionConfig(project.root, {
+      skills: { installed }
+    });
+  } catch (error) {
+    logger.warning(
+      `⚠️ Failed to update syncfusion.config.json: ${error.message}`
+    );
+  }
+
+}

package/src/commands/theme.js

@@ -0,0 +1,200 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { select } from '../../lib/inquirer-prompts.js';
+import { runCommand } from '../utils/run-command.js';
+import { logger } from '../utils/logger.js';
+import { requireSyncfusionProject } from '../utils/project-detector.js';
+import { updateSyncfusionConfig } from '../utils/config-generator.js';
+import { addPackagesToJson, detectPackageManager, getInstallCommand } from '../utils/package-manager.js';
+import { getThemePackages, generateThemeImportStatement, generateMainThemeImportStatement } from '../utils/theme-loader.js';
+import { VALID_THEMES } from '../constants.js';
+import { safePrompt } from '../utils/prompt-utils.js';
+import { pathExists } from '../utils/common.js';
+
+// Regex for SCSS/CSS @import/@use statements
+const THEME_IMPORT_LINE = /^(@import|@use)\s+["']@syncfusion\/ej2-[\w.-]+-theme\/styles\/[\w.-]+\.(css|scss)["'].*$/m;
+
+// Regex for JavaScript import statements in TypeScript/JSX files
+const JS_IMPORT_LINE = /^import\s+["']@syncfusion\/ej2-[\w.-]+-theme\/styles\/[\w.-]+\.(css|scss)["'];?$/m;
+
+function resolveStyleFilePath(project) {
+  const { root, framework, buildTool, template, styling } = project;
+  const ext = styling === 'scss' ? 'scss' : 'css';
+  const isEmpty = template === 'empty' || (project.components || []).length === 0;
+
+  if (framework === 'angular') {
+    return path.join(root, 'src', `styles.${ext}`);
+  }
+
+  if (framework === 'vue') {
+    return path.join(root, 'src', `style.${ext}`);
+  }
+
+  if (framework === 'typescript') {
+    return path.join(root, 'src', `style.${ext}`);
+  }
+
+  if (buildTool === 'nextjs') {
+    return path.join(root, 'src', 'app', 'globals.css');
+  }
+
+  // React (Vite)
+  return isEmpty
+    ? path.join(root, 'src', styling === 'scss' ? 'styles.scss' : 'App.css')
+    : path.join(root, 'src', styling === 'scss' ? 'styles.scss' : 'App.css');
+}
+
+/**
+ * For Next.js routed templates, get the layout.tsx file path
+ */
+function getNextJsLayoutPath(project) {
+  return path.join(project.root, 'src', 'app', 'layout.tsx');
+}
+
+/**
+ * Swap theme import in SCSS/CSS files (empty templates)
+ */
+async function swapThemeImportInStyleFile(filePath, newImportStatement) {
+  if (!(await pathExists(filePath))) {
+    logger.warning(`   ⚠️  Style file not found: ${path.relative(process.cwd(), filePath)}`);
+    return false;
+  }
+
+  let content = await readFile(filePath, 'utf-8');
+
+  if (THEME_IMPORT_LINE.test(content)) {
+    content = content.replace(THEME_IMPORT_LINE, newImportStatement);
+  } else {
+    content = `${newImportStatement}\n\n${content}`;
+  }
+
+  await writeFile(filePath, content);
+  return true;
+}
+
+/**
+ * Swap theme import in layout.tsx file (routed templates)
+ * Uses JavaScript import syntax
+ */
+async function swapThemeImportInLayoutFile(filePath, newImportStatement) {
+  if (!(await pathExists(filePath))) {
+    logger.warning(`   ⚠️  Layout file not found: ${path.relative(process.cwd(), filePath)}`);
+    return false;
+  }
+
+  let content = await readFile(filePath, 'utf-8');
+
+  if (JS_IMPORT_LINE.test(content)) {
+    content = content.replace(JS_IMPORT_LINE, newImportStatement);
+  } else {
+    // Add import at the top of the file, before existing imports
+    const lines = content.split('\n');
+    const lastImportIndex = lines.findIndex((line, idx) =>
+      line.startsWith('import ') && (idx === lines.length - 1 || !lines[idx + 1].startsWith('import'))
+    );
+
+    if (lastImportIndex !== -1) {
+      lines.splice(lastImportIndex + 1, 0, newImportStatement);
+    } else {
+      lines.unshift(newImportStatement);
+    }
+    content = lines.join('\n');
+  }
+
+  await writeFile(filePath, content);
+  return true;
+}
+
+/**
+ * Run the detected package manager's install command inside the project root.
+ */
+async function runInstall(project) {
+  const pkgManager = await detectPackageManager(project.root);
+  const { command, args } = getInstallCommand(pkgManager);
+
+  logger.info(`\n📦 Running ${command} ${args.join(' ')} to install the new theme package...\n`);
+
+  try {
+    await runCommand(command, args, { cwd: project.root });
+    logger.success(`✅ ${pkgManager} install completed.\n`);
+    return true;
+  } catch (error) {
+    logger.warning(`⚠️  ${pkgManager} install failed (${error.message}).`);
+    logger.info('   You can run it manually:');
+    logger.info(`   cd ${path.relative(process.cwd(), project.root) || '.'}`);
+    logger.info(`   ${command} ${args.join(' ')}\n`);
+    return false;
+  }
+}
+
+/**
+ * `sf theme switch [theme]` — swap the active Syncfusion theme
+ * package + CSS/SCSS import for the current project.
+ */
+export async function themeSwitchCommand(themeArg) {
+  const project = await requireSyncfusionProject(process.cwd());
+  if (!project) process.exit(1);
+
+  let theme = (themeArg || '').toLowerCase();
+
+  if (!theme) {
+    const selected = await safePrompt(select, {
+      message: 'Choose a theme:',
+      choices: [
+      { name: 'Material3', value: 'material3' },
+      { name: 'Tailwind3', value: 'tailwind3' },
+      { name: 'Bootstrap5.3', value: 'bootstrap5.3' },
+      { name: 'Fluent2', value: 'fluent2' }
+     ],
+      default: VALID_THEMES.includes(project.theme) ? project.theme : VALID_THEMES[0]
+    });
+    if (!selected) {
+      logger.warning('\n⚠️  Cancelled.\n');
+      return;
+    }
+    theme = selected;
+  }
+
+  if (!VALID_THEMES.includes(theme)) {
+    logger.error(`❌ Invalid theme: ${theme}`);
+    logger.info(`   Supported themes: ${VALID_THEMES.join(', ')}`);
+    process.exit(1);
+  }
+
+  if (theme === project.theme) {
+    logger.info(`\nℹ️  Theme is already "${theme}". Nothing to do.\n`);
+    return;
+  }
+
+  logger.info(`\n🎨 Switching theme: ${project.theme} → ${theme}\n`);
+
+  const newThemeInfo = await getThemePackages(theme);
+
+  await addPackagesToJson(project.root, [newThemeInfo.base]);
+
+  let updated = false;
+
+  if (project.buildTool === 'nextjs' && project.styling === 'scss') {
+    // Routed template: update layout.tsx with JavaScript import
+    const layoutFilePath = getNextJsLayoutPath(project);
+    const newImportStatement = generateMainThemeImportStatement(theme, project.styling);
+    updated = await swapThemeImportInLayoutFile(layoutFilePath, newImportStatement);
+  } else {
+    // Non-Next.js frameworks (Angular, Vue, React Vite)
+    const stylingFilePath = resolveStyleFilePath(project);
+    const newImportStatement = generateThemeImportStatement(theme, project.styling);
+    updated = await swapThemeImportInStyleFile(stylingFilePath, newImportStatement);
+  }
+
+  try {
+    await updateSyncfusionConfig(project.root, { theme });
+  } catch (error) {
+    logger.warning(
+      `⚠️ Failed to update syncfusion.config.json: ${error.message}`
+    );
+  }
+  if (updated) {
+    logger.success(`✅ Theme switched to "${theme}".`);
+  }
+  await runInstall(project);
+}