vk-typescript-cli 1.0.0

package/src/commands/interactive.js

@@ -0,0 +1,493 @@
+import readline from 'node:readline';
+import { input } from '../../lib/inquirer-prompts.js';
+import { createNewCommand } from './new.js';
+import { addComponentCommand } from './add.js';
+import { mcpAddCommand } from './mcp.js';
+import { skillsAddCommand } from './skills.js';
+// import { upgradeCommand } from './upgrade.js';
+import { themeSwitchCommand } from './theme.js';
+import { infoCommand } from './info.js';
+import { logger } from '../utils/logger.js';
+import { ansi, rgb, wrap } from '../utils/ansi-colors.js';
+import { safePrompt, selectWithIndentedChoices } from '../utils/prompt-utils.js';
+import { runCommand } from '../utils/run-command.js';
+
+const colors = {
+  cyan: (text) => wrap(text, ansi.cyan),
+  white: (text) => wrap(text, ansi.white),
+  dim: (text) => wrap(text, ansi.dim),
+  hex: (hex) => (text) => rgb(text, hex),
+  boldHex: (hex) => (text) => rgb(text, hex, { bold: true })
+};
+
+const MENU_ITEMS = [
+  {
+    category: 'PROJECT MANAGEMENT',
+    icon: '📦',
+    items: [
+      { id: 'new-project', title: 'Create a new project', command: 'sf new' },
+      { id: 'add-component', title: 'Add component to an existing project', command: 'sf add' },
+      { id: 'theme', title: 'Add theme to an existing project', command: 'sf theme switch' },
+      // { id: 'upgrade-packages', title: 'Upgrade Syncfusion packages', command: 'sf upgrade' },
+      { id: 'show-info', title: 'Show environment & project information', command: 'sf info' }
+    ]
+  },
+  {
+    category: 'AI & SKILLS',
+    icon: '🤖',
+    items: [
+      { id: 'mcp-add', title: 'Setup Model Context Protocol (MCP)', command: 'sf mcp init' },
+      { id: 'skills-add', title: 'Add component skills to AI Agent', command: 'sf skills install' }
+    ]
+  },
+  {
+    category: 'HELP & EXIT',
+    icon: 'ℹ️',
+    items: [
+      { id: 'help', title: 'View help', command: 'sf --help' },
+      { id: 'exit', title: 'Exit', command: 'Ctrl + C' }
+    ]
+  }
+];
+
+function buildMenuRows() {
+  const rows = [];
+
+  const allItems = MENU_ITEMS.flatMap(cat => cat.items);
+  const maxTitleLength = Math.max(...allItems.map(item => item.title.length));
+  const commandGap = 12;
+
+  MENU_ITEMS.forEach((cat, catIndex) => {
+    if (catIndex > 0) {
+      rows.push({ type: 'space' });
+    }
+
+    rows.push({
+      type: 'header',
+      text: `${cat.icon} ${cat.category}`
+    });
+
+    for (const item of cat.items) {
+      rows.push({
+        type: 'item',
+        id: item.id,
+        title: item.title,
+        command: item.command,
+        paddedTitle: item.title.padEnd(maxTitleLength + commandGap, ' ')
+      });
+    }
+  });
+
+  return rows;
+}
+
+function renderMenuRow(row, selected) {
+  if (row.type === 'space') {
+    return '';
+  }
+
+  if (row.type === 'header') {
+    return `  \x1b[0m\x1b[1m\x1b[97m${row.text}\x1b[0m`;
+  }
+
+  const pointer = selected ? colors.cyan('>') : ' ';
+
+  // Increase this value to move command title right
+  const itemIndent = '      ';
+
+  const title = selected
+    ? colors.boldHex('#00AFFF')(row.paddedTitle)
+    : colors.white(row.paddedTitle);
+
+  const command = row.command
+    ? colors.dim(row.command)
+    : '';
+
+  return `${pointer}${itemIndent}${title}${command}`;
+}
+
+function promptInteractiveCommand() {
+  return new Promise((resolve) => {
+    const rows = buildMenuRows();
+    const selectableRows = rows
+      .map((row, index) => ({ row, index }))
+      .filter(entry => entry.row.type === 'item');
+
+    let selectedIndex = 0;
+
+    const renderAll = () => {
+      process.stdout.write('\n');
+      process.stdout.write(colors.boldHex('#00AFFF')('? What would you like to do? '));
+      process.stdout.write(colors.dim('(Use arrow keys)\n'));
+      process.stdout.write('\n');
+
+      rows.forEach((row, rowIndex) => {
+        const isSelected =
+          selectableRows[selectedIndex].index === rowIndex;
+
+        process.stdout.write(renderMenuRow(row, isSelected) + '\n');
+      });
+    };
+
+    const updateRow = (rowIndex) => {
+      const linesFromBottom = rows.length - rowIndex;
+
+      readline.moveCursor(process.stdout, 0, -linesFromBottom);
+      readline.cursorTo(process.stdout, 0);
+      readline.clearLine(process.stdout, 0);
+
+      const isSelected =
+        selectableRows[selectedIndex].index === rowIndex;
+
+      process.stdout.write(renderMenuRow(rows[rowIndex], isSelected));
+
+      readline.cursorTo(process.stdout, 0);
+      readline.moveCursor(process.stdout, 0, linesFromBottom);
+    };
+
+    const cleanup = () => {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+      process.stdin.removeAllListeners('keypress');
+      process.stdout.write('\n');
+    };
+
+    readline.emitKeypressEvents(process.stdin);
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+
+    renderAll();
+
+    process.stdin.on('keypress', (_, key) => {
+      if (!key) {
+        return;
+      }
+
+      if (key.ctrl && key.name === 'c') {
+        cleanup();
+        process.exit(0);
+      }
+
+      const previousSelectedRow = selectableRows[selectedIndex].index;
+
+      if (key.name === 'up') {
+        selectedIndex =
+          selectedIndex === 0
+            ? selectableRows.length - 1
+            : selectedIndex - 1;
+      } else if (key.name === 'down') {
+        selectedIndex =
+          selectedIndex === selectableRows.length - 1
+            ? 0
+            : selectedIndex + 1;
+      } else if (key.name === 'return') {
+        const selectedCommand = selectableRows[selectedIndex].row.id;
+        cleanup();
+        resolve(selectedCommand);
+        return;
+      } else {
+        return;
+      }
+
+      const currentSelectedRow = selectableRows[selectedIndex].index;
+
+      updateRow(previousSelectedRow);
+      updateRow(currentSelectedRow);
+    });
+  });
+}
+
+async function runCliHelp() {
+  try {
+    if (process.platform === 'win32') {
+      await runCommand('cmd.exe', ['/d', '/s', '/c', 'sf --help']);
+    } else {
+      await runCommand('sf', ['--help']);
+    }
+  } catch (error) {
+    logger.warning(`\n⚠️  Unable to show help: ${error.message}\n`);
+    logger.info('Run: sf --help\n');
+  }
+}
+
+async function executeCommand(commandId) {
+  switch (commandId) {
+    case 'new-project':
+      await runNewProjectInteractive();
+      break;
+    case 'add-component':
+      await addComponentCommand();
+      break;
+    case 'mcp-add':
+      await mcpAddCommand({ promptEditor: true });
+      break;
+    case 'skills-add':
+      await skillsAddCommand({ promptInstallMode: true });
+      break;
+    case 'theme':
+      await themeSwitchCommand();
+      break;
+    // case 'upgrade-packages':
+    //   await upgradeCommand();
+    //   break;
+    case 'show-info':
+      await infoCommand();
+      break;
+    case 'help':
+      await runCliHelp();
+      break;
+    case 'exit':
+      logger.info('\n' + colors.boldHex('#00AFFF')('👋 Thanks for using Syncfusion CLI!\n'));
+      process.exit(0);
+      break;
+    default:
+      logger.warning(`Unknown command: ${commandId}`);
+      break;
+  }
+}
+
+function yesNoKeyPrompt(message, defaultValue = false, options = {}) {
+  return new Promise((resolve) => {
+    if (!process.stdin.isTTY || !process.stdout.isTTY) {
+      resolve(defaultValue);
+      return;
+    }
+    const suffix = defaultValue ? ' [Y/n] ' : ' [y/N] ';
+    const blue = options.blue === true;
+    const cleanup = () => {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+      process.stdin.removeAllListeners('keypress', onKeypress);
+    };
+    const renderQuestion = () => {
+      if (blue) {
+        process.stdout.write(colors.boldHex('#00AFFF')(`? ${message}`));
+      } else {
+        process.stdout.write(`? ${message}`);
+      }
+
+      process.stdout.write(colors.dim(suffix));
+    };
+    const finish = (value) => {
+      const answer = colors.hex('#00AFFF')(value ? 'yes' : 'no');
+      readline.cursorTo(process.stdout, 0);
+      readline.clearLine(process.stdout, 0);
+      process.stdout.write(
+        `${wrap('✔', ansi.green)} ${wrap(message, ansi.bold)} ${answer}\n`
+      );
+      cleanup();
+      resolve(value);
+    };
+    const onKeypress = (str, key) => {
+      if (key?.ctrl && key.name === 'c') {
+        cleanup();
+        process.stdout.write('\n');
+        process.exit(0);
+      }
+      if (str === 'y' || str === 'Y') {
+        finish(true);
+        return;
+      }
+      if (str === 'n' || str === 'N') {
+        finish(false);
+        return;
+      }
+      if (key?.name === 'return') {
+        finish(defaultValue);
+      }
+    };
+
+    readline.emitKeypressEvents(process.stdin);
+    renderQuestion();
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('keypress', onKeypress);
+  });
+}
+
+export async function interactiveMode() {
+  while (true) {
+    const command = await promptInteractiveCommand();
+
+    await executeCommand(command);
+
+    const again = await yesNoKeyPrompt('↩️  Return to main menu?', true , { blue: true });
+
+    if (!again) {
+      logger.info('\n' + colors.boldHex('#00AFFF')('👋 Thanks for using Syncfusion CLI!\n'));
+      process.exit(0);
+    }
+  }
+}
+
+async function runNewProjectInteractive() {
+  logger.info('\n🎯 Syncfusion Project Creator\n');
+
+  const appName = await safePrompt(input, {
+    message: 'Project name?',
+    default: 'my-syncfusion-app',
+    validate: (value) => {
+      if (!value || value.trim() === '') {
+        return 'Project name is required';
+      }
+
+      if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+        return 'Project name can only contain letters, numbers, hyphens, and underscores';
+      }
+
+      return true;
+    }
+  });
+
+  if (!appName) {
+    logger.warning('\n⚠️  Project creation cancelled.\n');
+    return;
+  }
+
+  const framework = await selectWithIndentedChoices({
+    message: 'Choose Framework:',
+    choices: [
+      { name: 'React', value: 'react' },
+      { name: 'Angular', value: 'angular' },
+      { name: 'Vue', value: 'vue' },
+      { name: 'TypeScript (vanilla EJ2)', value: 'typescript' }
+    ],
+    default: 'react'
+  });
+
+  if (!framework) {
+    logger.warning('\n⚠️  Project creation cancelled.\n');
+    return;
+  }
+
+  let buildTool = null;
+
+  if (framework === 'react') {
+    buildTool = await selectWithIndentedChoices({
+      message: 'Choose Build Tool:',
+      choices: [
+        { name: 'Vite', value: 'vite' },
+        { name: 'Next.js', value: 'nextjs' }
+      ],
+      default: 'vite'
+    });
+
+    if (!buildTool) {
+      logger.warning('\n⚠️  Project creation cancelled.\n');
+      return;
+    }
+  }
+
+  let type = 'typescript';
+
+  if (framework === 'typescript') {
+    // The TypeScript (vanilla EJ2) platform is always TypeScript.
+    type = 'ts';
+  } else if (framework !== 'angular') {
+    type = await selectWithIndentedChoices({
+      message: 'Choose Language:',
+      choices: [
+        { name: 'TypeScript', value: 'ts' },
+        { name: 'JavaScript', value: 'js' }
+      ],
+      default: 'ts'
+    });
+
+    if (!type) {
+      logger.warning('\n⚠️  Project creation cancelled.\n');
+      return;
+    }
+  }
+
+  const template = await selectWithIndentedChoices({
+    message: 'Choose Template:',
+    choices: [
+      { name: 'Empty', value: 'empty' },
+      { name: 'Grid', value: 'grid' },
+      { name: 'Chart', value: 'chart' },
+      { name: 'Scheduler', value: 'scheduler' },
+      { name: 'Gantt', value: 'gantt' },
+      { name: 'File Manager', value: 'file-manager' },
+      { name: 'Diagram', value: 'diagram' },
+      { name: 'Rich Text Editor', value: 'rich-text-editor' },
+      { name: 'PDF Viewer', value: 'pdf-viewer' },
+      { name: 'DOCX Editor', value: 'docx-editor' },
+      { name: 'Spreadsheet Editor', value: 'spreadsheet-editor' }
+    ],
+    default: 'empty'
+  });
+
+  if (!template) {
+    logger.warning('\n⚠️  Project creation cancelled.\n');
+    return;
+  }
+
+  const theme = await selectWithIndentedChoices({
+    message: 'Choose Theme:',
+    choices: [
+      { name: 'Material3', value: 'material3' },
+      { name: 'Tailwind3', value: 'tailwind3' },
+      { name: 'Bootstrap5.3', value: 'bootstrap5.3' },
+      { name: 'Fluent2', value: 'fluent2' }
+    ],
+    default: 'material3'
+  });
+
+  if (!theme) {
+    logger.warning('\n⚠️  Project creation cancelled.\n');
+    return;
+  }
+
+  const styling = await selectWithIndentedChoices({
+    message: 'Choose Style Format:',
+    choices: [
+      { name: 'CSS', value: 'css' },
+      { name: 'SCSS', value: 'scss' }
+    ],
+    default: 'css'
+  });
+
+  if (!styling) {
+    logger.warning('\n⚠️  Project creation cancelled.\n');
+    return;
+  }
+
+  const wantsMcp = await yesNoKeyPrompt(
+    'Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project?',
+    false
+  );
+
+  const wantsSkills = await yesNoKeyPrompt(
+    'Would you like to install Syncfusion Component Skills for AI-powered development?',
+    false
+  );
+
+  let start = false;
+  let noStart = false;
+
+  if (process.stdout.isTTY) {
+    const wantsBootstrap = await yesNoKeyPrompt('Install dependencies and start app now?', false);
+
+    if (wantsBootstrap === true) {
+      start = true;
+    } else if (wantsBootstrap === false) {
+      noStart = true;
+    }
+  }
+
+  await createNewCommand(framework, appName, {
+    framework: framework,
+    buildTool,
+    type,
+    template: template,
+    theme: theme,
+    styling: styling,
+    mcp: wantsMcp,
+    promptMcpEditor: wantsMcp === true,
+    skills: wantsSkills,
+    promptSkillsInstallMode: wantsSkills === true,
+    start,
+    noStart
+  });
+}

package/src/commands/mcp.js

@@ -0,0 +1,135 @@
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
+import { select } from '../../lib/inquirer-prompts.js';
+import { logger } from '../utils/logger.js';
+import { safePrompt } from '../utils/prompt-utils.js';
+import { requireSyncfusionProject } from '../utils/project-detector.js';
+import { updateSyncfusionConfig } from '../utils/config-generator.js';
+import { setupMcpForEditors } from '../utils/mcp-generator.js';
+
+const EDITOR_FLAGS = [
+  { flag: 'vsCode', value: 'vscode' },
+  { flag: 'codeStudio', value: 'codestudio' },
+  { flag: 'cursor', value: 'cursor' },
+  { flag: 'jetbrains', value: 'jetbrains' }
+];
+
+const EDITOR_VALUE_MAP = {
+  all: 'all',
+  vscode: 'vscode',
+  'vs-code': 'vscode',
+  codestudio: 'codestudio',
+  'code-studio': 'codestudio',
+  cursor: 'cursor',
+  jetbrains: 'jetbrains'
+};
+
+function normalizeEditorValue(editor) {
+  if (!editor) return null;
+
+  const value = String(editor).trim().toLowerCase();
+  return EDITOR_VALUE_MAP[value] || null;
+}
+
+export function resolveMcpEditors(options = {}, editorArg) {
+  const positionalEditor = normalizeEditorValue(editorArg || options.editor);
+
+  if (positionalEditor) {
+    const hasFlagEditor = options.all || EDITOR_FLAGS.some((editor) => options[editor.flag]);
+    if (hasFlagEditor) {
+      logger.error('Use either a positional editor value or editor flags, not both.');
+      logger.info('Example: sf mcp init code-studio');
+      process.exit(1);
+    }
+
+    return [positionalEditor];
+  }
+
+  if ((editorArg || options.editor) && !positionalEditor) {
+    logger.error(`Invalid editor value: ${editorArg || options.editor}`);
+    logger.info('Supported editor values: all, vs-code, code-studio, cursor, jetbrains.');
+    process.exit(1);
+  }
+
+  if (options.all) {
+    const hasOtherEditor = EDITOR_FLAGS.some((editor) => options[editor.flag]);
+    if (hasOtherEditor) {
+      logger.error('Use --all alone, or choose one or more specific editor flags.');
+      process.exit(1);
+    }
+    return ['all'];
+  }
+
+  const editors = EDITOR_FLAGS
+    .filter((editor) => options[editor.flag])
+    .map((editor) => editor.value);
+
+  return editors.length > 0 ? editors : ['all'];
+}
+
+/**
+ * `sf mcp` — configure the Syncfusion MCP (AI assistant) server
+ * for the current project.
+ */
+export async function mcpAddCommand(options = {}, editorArg) {
+  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.mcp?.integrated === true) {
+    logger.info('\nℹ️  MCP already added. Skipping.\n');
+    return;
+  }
+
+  let editors;
+
+  if (options.promptEditor && !editorArg) {
+    const editorOptions = await promptMcpEditorSelection();
+    if (!editorOptions) {
+      return;
+    }
+    editors = resolveMcpEditors(editorOptions);
+  } else {
+    editors = resolveMcpEditors(options, editorArg);
+  }
+
+  logger.info(`\n🧩 Configuring Syncfusion MCP server for ${project.framework} project...\n`);
+
+  const written = await setupMcpForEditors(project.root, project.framework, editors);
+
+  try {
+    await updateSyncfusionConfig(project.root, {
+      mcp: { integrated: true, editors: written }
+    });
+  } catch (error) {
+    logger.warning(
+      `⚠️ Failed to update syncfusion.config.json: ${error.message}`
+    );
+  }
+
+  logger.success('\n✅ MCP server configuration added.');
+  logger.info(`Update the configuration file with your Syncfusion API key, then open the file(s) and click "Start" to connect to the MCP server. \nFor more information, see: https://ej2.syncfusion.com/${config.framework}/documentation/mcp-server/ai-coding-assistant/getting-started`);
+}
+
+export 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: 'vs-code' },
+      { 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 null;
+  }
+
+  return { editor };
+}