vk-typescript-cli 1.0.0

package/Jenkinsfile

@@ -0,0 +1,48 @@
+#!groovy
+
+node('EJ2Node20') {
+    timeout(time:60){
+    try {
+        deleteDir()
+
+        stage('Import') {
+            git url: 'https://gitea.syncfusion.com/essential-studio/ej2-groovy-scripts.git', branch: 'master', credentialsId: env.GiteaCredentialID;
+            shared = load 'src/shared.groovy'
+        }
+
+        stage('Checkout') {
+            checkout scm
+        }
+
+        stage('Validation') {
+            shared.getProjectDetails()
+            shared.gitlabCommitStatus('running')
+        }
+
+        if (shared.checkCommitMessage()) {
+            stage('Install') {
+                sh 'node --version'
+                sh 'npm --version'
+                sh 'npm install'
+            }
+
+            stage('Test') {
+                sh 'npm run test'
+            }
+
+            stage('Publish') {
+                sh 'npm run ci-report'
+                if (shared.isProtectedBranch()){
+                    sh 'npm run publish'
+                }
+            }
+        }
+
+        shared.gitlabCommitStatus('success')
+        deleteDir()
+    }
+    catch(Exception e) {
+        shared.throwError(e)
+    }
+    }
+}

package/README.md

@@ -0,0 +1,300 @@
+# Syncfusion<sup>®</sup> CLI
+
+The Syncfusion<sup>®</sup> CLI is a command-line tool for creating and managing React, Angular, and Vue applications with Syncfusion<sup>®</sup> components.
+
+It helps developers quickly scaffold applications with Syncfusion<sup>®</sup> components, add components to existing projects, switch themes, configure MCP, install Syncfusion<sup>®</sup> components skills and view project information.
+
+## Key Features
+
+- Create React, Angular, and Vue applications with Syncfusion<sup>®</sup> components.
+- Supports JavaScript and TypeScript project creation.
+- Provides ready-to-use templates such as Empty, Grid, Chart, Scheduler, Gantt, Diagram, and Rich Text Editor.
+- Supports built-in themes such as Material 3, Fluent 2, Bootstrap 5.3, and Tailwind 3.
+- Supports CSS and SCSS styling options.
+- Add Syncfusion<sup>®</sup> components to an existing project.
+- Configure Syncfusion<sup>®</sup> MCP server for supported editors.
+- Install Syncfusion<sup>®</sup> component skills.
+- View project and environment information.
+
+## Installation
+
+Install the Syncfusion<sup>®</sup> CLI globally using npm:
+
+```bash
+npm install -g @syncfusion/syncfusion-cli
+```
+
+After installation, verify the installed CLI version:
+
+```bash
+sf --version
+```
+
+To view all available CLI commands:
+
+```bash
+sf --help
+```
+
+## Usage
+
+The basic command format is:
+
+```bash
+sf <command> [arguments] [options]
+```
+
+Example:
+
+```bash
+sf new my-app --framework react
+```
+
+This command creates a new Syncfusion<sup>®</sup> application using the default configuration.
+
+## Interactive Mode
+
+Interactive mode allows users to create and configure a Syncfusion<sup>®</sup> application by answering prompts in the terminal.
+
+Run the CLI without arguments to start interactive mode:
+
+```bash
+sf
+```
+
+Interactive mode guides the user through project creation step by step. It is useful for first-time users because they do not need to remember all command options.
+
+### Interactive Mode Options
+
+Interactive mode provides a guided menu to perform common Syncfusion<sup>®</sup> CLI actions without typing full commands.
+
+- **Create a new project** - Creates a React, Angular, or Vue application with Syncfusion<sup>®</sup> components.
+- **Add component** - Adds a Syncfusion<sup>®</sup> component to an existing project.
+- **Switch theme** - Applies or changes the Syncfusion<sup>®</sup> theme in the current project.
+- **Show project info** - Displays environment and project details.
+- **Setup MCP** - Configures Syncfusion<sup>®</sup> MCP for a supported editor.
+- **Install skills** - Installs Syncfusion<sup>®</sup> component skills for AI-assisted development.
+- **View help** - Shows CLI commands, options, and usage information.
+- **Exit** - Closes the interactive CLI prompt.
+
+Example:
+
+```bash
+ ──────────────────────────────────────────────────────────────
+  Syncfusion CLI                                     v1.0.1
+ ──────────────────────────────────────────────────────────────
+
+? What would you like to do? (Use arrow keys)
+
+  📦 PROJECT MANAGEMENT
+>      Create a new project                              sf new
+       Add component to an existing project              sf add
+       Add theme to an existing project                  sf theme switch
+       Show environment & project information            sf info
+
+  🤖 AI & SKILLS
+       Setup Model Context Protocol (MCP)                sf mcp init
+       Add component skills to AI Agent                  sf skills install
+
+  ℹ️ HELP & EXIT
+       View help                                         sf --help
+       Exit                                              Ctrl + C
+```
+
+## Non-Interactive Mode
+
+Non-interactive mode allows users to create and configure projects directly using command-line options.
+
+This mode is useful for experienced users, automation scripts, and CI/CD workflows.
+
+The Syncfusion<sup>®</sup> CLI supports flag-based non-interactive usage. In flag mode, values are passed using named options, which makes the command easier to read and avoids mistakes caused by argument order.
+
+### Syntax
+
+```bash
+sf new <project-name> --framework <framework> --build-tool <buildTool> --type <type> --template <template> --theme <theme> --styling <styling> --mcp <editor> --skills
+```
+
+### React Example
+
+```bash
+sf new my-react-app --framework react --type ts --template grid --theme fluent2
+```
+
+### React with Next.js Example
+
+```bash
+sf new my-next-app --framework react --build-tool nextjs --type ts --template chart --theme fluent2
+```
+
+### Angular Example
+
+```bash
+sf new my-angular-app --framework angular --type ts --template rich-text-editor --theme fluent2
+```
+
+### Vue Example
+
+```bash
+sf new my-vue-app --framework vue --type ts --template file-manager --theme tailwind3 --styling scss
+```
+
+> Note: The `--build-tool` option is supported only for React projects. Do not use `--build-tool` with Angular or Vue.
+
+## Commands
+
+### Create a New Project
+
+Creates a new application with Syncfusion<sup>®</sup> components.
+
+```bash
+sf new <appName>
+```
+
+Example:
+
+```bash
+sf new my-app --framework react --type ts --template grid --theme material3 --styling css
+```
+
+### Add a Component
+
+Adds a Syncfusion<sup>®</sup> component to an existing project.
+
+```bash
+sf add <component>
+```
+
+Examples:
+
+```bash
+sf add grid
+sf add chart
+sf add scheduler
+sf add gantt
+sf add diagram
+sf add rich-text-editor
+sf add file-manager
+sf add pdf-viewer
+sf add docx-editor
+sf add spreadsheet-editor
+```
+
+### Configure Syncfusion MCP
+
+Configures the Syncfusion<sup>®</sup> MCP server in an existing project.
+
+```bash
+sf mcp init <editor>
+```
+
+Example:
+
+```bash
+sf mcp init vs-code
+```
+
+### Install Syncfusion<sup>®</sup> Skills
+
+Installs Syncfusion<sup>®</sup> skills in an existing project.
+
+```bash
+sf skills install
+```
+
+### Switch Theme
+
+Switches the theme in an existing Syncfusion<sup>®</sup> project.
+
+```bash
+sf theme switch <themeName>
+```
+
+Example:
+
+```bash
+sf theme switch tailwind3
+```
+
+### Show Project Information
+
+Displays project and environment information.
+
+```bash
+sf info
+```
+
+## Available Options
+
+| Option | Description | Supported Values | Example |
+| --- | --- | --- | --- |
+| `<appName>` | Specifies the application name. | Any valid application name | `sf new my-app` |
+| `--framework <framework>` | Specifies the framework for the application. | `react`, `angular`, `vue` | `sf new my-app --framework react` |
+| `--build-tool <buildTool>` | Specifies the build tool for React applications. This option is supported only for React projects. | `vite`, `nextjs` | `sf new my-app --framework react --build-tool nextjs` |
+| `--type <type>` | Specifies the language type for the project. | `js`, `ts` | `sf new my-app --type ts` |
+| `--template <template>` | Specifies the project template. | `empty`, `grid`, `chart`, `scheduler`, `gantt`, `diagram`, `rich-text-editor`, `pdf-viewer`. `docx-editor`, `spreadsheet-editor` | `sf new my-app --template grid` |
+| `--theme <theme>` | Specifies the Syncfusion<sup>®</sup> theme. | `material3`, `fluent2`, `bootstrap5.3`, `tailwind3` | `sf new my-app --theme fluent2` |
+| `--styling <styling>` | Specifies the stylesheet format. | `css`, `scss` | `sf new my-app --styling scss` |
+| `--mcp <editor>` | Configures Syncfusion<sup>®</sup> MCP for the selected editor. | `all`, `vs-code`, `code-studio`, `cursor`, `jetbrains` | `sf new my-app --mcp vs-code` |
+| `--skills` | Installs Syncfusion<sup>®</sup> skills during project creation. | No value required | `sf new my-app --skills` |
+
+## Default Configuration
+
+If options are not provided, the CLI uses the following default values:
+
+| Setting | Default Value |
+| --- | --- |
+| Framework | `react` |
+| React build tool | `vite` |
+| Language type | `ts` |
+| Template | `empty` |
+| Theme | `material3` |
+| Styling | `css` |
+| MCP | `no` |
+| Skills | `no` |
+
+## Examples
+
+### Create a React Grid Application
+
+```bash
+sf new my-react-app --framework react --build-tool vite --type ts --template grid --theme material3 --styling css
+```
+
+### Create a React Next.js Chart Application
+
+```bash
+sf new my-next-app --framework react --build-tool nextjs --type ts --template chart --theme fluent2 --styling scss
+```
+
+### Create an Angular Scheduler Application
+
+```bash
+sf new my-angular-app --framework angular --type ts --template scheduler --theme bootstrap5.3 --styling css
+```
+
+### Create a Vue Chart Application
+
+```bash
+sf new my-vue-app --framework vue --type ts --template chart --theme tailwind3 --styling scss
+```
+
+## Support
+
+Product support is available through following mediums.
+
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-button-npm)
+* Live chat
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_campaign=button) for more info.
+
+&copy; Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.