igniteui-cli 15.0.0-rc.2 → 15.0.0-rc.3
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/lib/commands/ai-config.d.ts +1 -2
- package/lib/commands/ai-config.js +4 -64
- package/lib/templates/IgniteUIForReactTemplate.d.ts +1 -0
- package/lib/templates/IgniteUIForReactTemplate.js +1 -0
- package/lib/templates/IgniteUIForWebComponentsTemplate.d.ts +1 -0
- package/lib/templates/IgniteUIForWebComponentsTemplate.js +1 -0
- package/lib/templates/jQueryTemplate.d.ts +1 -0
- package/lib/templates/jQueryTemplate.js +1 -0
- package/package.json +4 -4
- package/templates/jquery/js/projects/empty/index.js +1 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md +23 -3
- package/templates/react/igr-ts/projects/_base/index.d.ts +1 -0
- package/templates/react/igr-ts/projects/_base/index.js +1 -0
- package/templates/react/igr-ts/projects/_base_with_home/index.d.ts +1 -0
- package/templates/react/igr-ts/projects/_base_with_home/index.js +1 -0
- package/templates/react/igr-ts/projects/base/index.d.ts +1 -0
- package/templates/react/igr-ts/projects/base/index.js +1 -0
- package/templates/react/igr-ts/projects/empty/index.d.ts +1 -0
- package/templates/react/igr-ts/projects/empty/index.js +1 -0
- package/templates/react/igr-ts/projects/top-nav/index.d.ts +1 -0
- package/templates/react/igr-ts/projects/top-nav/index.js +1 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md +27 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/SKILL.md +22 -1
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/angular.md +2 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/react.md +2 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vanilla-js.md +2 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-integrate-with-framework/references/vue.md +2 -0
- package/templates/webcomponents/igc-ts/projects/_base/index.d.ts +1 -0
- package/templates/webcomponents/igc-ts/projects/_base/index.js +1 -0
- package/templates/webcomponents/igc-ts/projects/_base_with_home/index.d.ts +1 -0
- package/templates/webcomponents/igc-ts/projects/_base_with_home/index.js +1 -0
- package/templates/webcomponents/igc-ts/projects/base/index.d.ts +1 -0
- package/templates/webcomponents/igc-ts/projects/base/index.js +1 -0
- package/templates/webcomponents/igc-ts/projects/empty/index.d.ts +1 -0
- package/templates/webcomponents/igc-ts/projects/empty/index.js +1 -0
- package/templates/webcomponents/igc-ts/projects/side-nav/index.d.ts +1 -0
- package/templates/webcomponents/igc-ts/projects/side-nav/index.js +1 -0
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import { IFileSystem } from "@igniteui/cli-core";
|
|
2
1
|
import { CommandModule } from "yargs";
|
|
3
|
-
export declare function configureMCP(
|
|
2
|
+
export declare function configureMCP(): void;
|
|
4
3
|
export declare function configureSkills(): void;
|
|
5
4
|
export declare function configure(skills?: boolean): void;
|
|
6
5
|
declare const command: CommandModule;
|
|
@@ -1,27 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
26
3
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
27
4
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -36,50 +13,13 @@ exports.configureMCP = configureMCP;
|
|
|
36
13
|
exports.configureSkills = configureSkills;
|
|
37
14
|
exports.configure = configure;
|
|
38
15
|
const cli_core_1 = require("@igniteui/cli-core");
|
|
39
|
-
|
|
40
|
-
const
|
|
41
|
-
const IGNITEUI_THEMING_SERVER_KEY = "igniteui-theming";
|
|
42
|
-
const igniteuiServer = {
|
|
43
|
-
command: "npx",
|
|
44
|
-
args: ["-y", "igniteui-cli@next", "mcp"]
|
|
45
|
-
};
|
|
46
|
-
const igniteuiThemingServer = {
|
|
47
|
-
command: "npx",
|
|
48
|
-
args: ["-y", "igniteui-theming", "igniteui-theming-mcp"]
|
|
49
|
-
};
|
|
50
|
-
function getConfigPath() {
|
|
51
|
-
return path.join(process.cwd(), ".vscode", "mcp.json");
|
|
52
|
-
}
|
|
53
|
-
function readJson(filePath, fallback, fileSystem) {
|
|
54
|
-
try {
|
|
55
|
-
return JSON.parse(fileSystem.readFile(filePath));
|
|
56
|
-
}
|
|
57
|
-
catch (_a) {
|
|
58
|
-
return fallback;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
function writeJson(filePath, data, fileSystem) {
|
|
62
|
-
fileSystem.writeFile(filePath, JSON.stringify(data, null, 2) + "\n");
|
|
63
|
-
}
|
|
64
|
-
function configureMCP(fileSystem = new cli_core_1.FsFileSystem()) {
|
|
65
|
-
const configPath = getConfigPath();
|
|
66
|
-
const config = readJson(configPath, { servers: {} }, fileSystem);
|
|
67
|
-
config.servers = config.servers || {};
|
|
68
|
-
let modified = false;
|
|
69
|
-
if (!config.servers[IGNITEUI_SERVER_KEY]) {
|
|
70
|
-
config.servers[IGNITEUI_SERVER_KEY] = igniteuiServer;
|
|
71
|
-
modified = true;
|
|
72
|
-
}
|
|
73
|
-
if (!config.servers[IGNITEUI_THEMING_SERVER_KEY]) {
|
|
74
|
-
config.servers[IGNITEUI_THEMING_SERVER_KEY] = igniteuiThemingServer;
|
|
75
|
-
modified = true;
|
|
76
|
-
}
|
|
16
|
+
function configureMCP() {
|
|
17
|
+
const modified = (0, cli_core_1.addMcpServers)(cli_core_1.VS_CODE_MCP_PATH);
|
|
77
18
|
if (!modified) {
|
|
78
|
-
cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${
|
|
19
|
+
cli_core_1.Util.log(` Ignite UI MCP servers already configured in ${cli_core_1.VS_CODE_MCP_PATH}`);
|
|
79
20
|
return;
|
|
80
21
|
}
|
|
81
|
-
|
|
82
|
-
cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${configPath}`);
|
|
22
|
+
cli_core_1.Util.log(cli_core_1.Util.greenCheck() + ` MCP servers configured in ${cli_core_1.VS_CODE_MCP_PATH}`);
|
|
83
23
|
}
|
|
84
24
|
function configureSkills() {
|
|
85
25
|
const result = (0, cli_core_1.copyAISkillsToProject)();
|
|
@@ -12,6 +12,7 @@ export declare class IgniteUIForReactTemplate implements Template {
|
|
|
12
12
|
framework: string;
|
|
13
13
|
projectType: string;
|
|
14
14
|
hasExtraConfiguration: boolean;
|
|
15
|
+
isHidden: boolean;
|
|
15
16
|
packages: any[];
|
|
16
17
|
delimiters: import("@igniteui/cli-core").TemplateDelimiters;
|
|
17
18
|
protected widget: string;
|
|
@@ -11,6 +11,7 @@ export declare class IgniteUIForWebComponentsTemplate implements Template {
|
|
|
11
11
|
framework: string;
|
|
12
12
|
projectType: string;
|
|
13
13
|
hasExtraConfiguration: boolean;
|
|
14
|
+
isHidden: boolean;
|
|
14
15
|
packages: any[];
|
|
15
16
|
dependencies: TemplateDependency[];
|
|
16
17
|
delimiters: import("@igniteui/cli-core").TemplateDelimiters;
|
|
@@ -38,6 +38,7 @@ class IgniteUIForWebComponentsTemplate {
|
|
|
38
38
|
this.framework = "webcomponents";
|
|
39
39
|
this.projectType = "igc-ts";
|
|
40
40
|
this.hasExtraConfiguration = false;
|
|
41
|
+
this.isHidden = false;
|
|
41
42
|
this.packages = [];
|
|
42
43
|
this.dependencies = [];
|
|
43
44
|
this.delimiters = cli_core_1.defaultDelimiters;
|
|
@@ -15,6 +15,7 @@ export declare class jQueryTemplate implements Template {
|
|
|
15
15
|
framework: string;
|
|
16
16
|
projectType: string;
|
|
17
17
|
hasExtraConfiguration: boolean;
|
|
18
|
+
isHidden: boolean;
|
|
18
19
|
packages: any[];
|
|
19
20
|
delimiters: import("@igniteui/cli-core").TemplateDelimiters;
|
|
20
21
|
private configFile;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-cli",
|
|
3
|
-
"version": "15.0.0-rc.
|
|
3
|
+
"version": "15.0.0-rc.3",
|
|
4
4
|
"description": "CLI tool for creating Ignite UI projects",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"CLI",
|
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
"all": true
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@igniteui/angular-templates": "~21.
|
|
70
|
-
"@igniteui/cli-core": "~15.0.0-rc.
|
|
71
|
-
"@igniteui/mcp-server": "~15.0.0-rc.
|
|
69
|
+
"@igniteui/angular-templates": "~21.2.1500-rc.3",
|
|
70
|
+
"@igniteui/cli-core": "~15.0.0-rc.3",
|
|
71
|
+
"@igniteui/mcp-server": "~15.0.0-rc.3",
|
|
72
72
|
"@inquirer/prompts": "^7.9.0",
|
|
73
73
|
"@types/yargs": "^17.0.33",
|
|
74
74
|
"chalk": "^5.3.0",
|
|
@@ -8,6 +8,24 @@ user-invocable: true
|
|
|
8
8
|
|
|
9
9
|
This skill covers everything from identifying the right component for a UI requirement to installing, setting up, and using Ignite UI for React components — including JSX patterns, event handling, refs, controlled/uncontrolled form components, and TypeScript.
|
|
10
10
|
|
|
11
|
+
## Before You Answer
|
|
12
|
+
|
|
13
|
+
- Do not guess package names or import paths from memory.
|
|
14
|
+
- First identify the component family, then read the relevant reference files from the Content Guide below.
|
|
15
|
+
- Check `package.json` and keep public or licensed package names consistent.
|
|
16
|
+
- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
|
|
17
|
+
|
|
18
|
+
### Package Routing
|
|
19
|
+
|
|
20
|
+
| Component family | Install packages | Import from |
|
|
21
|
+
|---|---|---|
|
|
22
|
+
| Core UI components | `igniteui-react` | `igniteui-react` |
|
|
23
|
+
| Advanced grids | `igniteui-react-grids` (trial) `@infragistics/igniteui-react-grids` (licensed) | `igniteui-react-grids` |
|
|
24
|
+
| Grid Lite | `igniteui-react`, `igniteui-grid-lite` | `igniteui-react`, `igniteui-grid-lite` |
|
|
25
|
+
| Charts | `igniteui-react-charts` (trial) `@infragistics/igniteui-react-charts` (licensed) | `igniteui-react-charts` |
|
|
26
|
+
| Gauges | `igniteui-react-gauges` (trial) `@infragistics/igniteui-react-gauges` (licensed) | `igniteui-react-gauges` |
|
|
27
|
+
| Maps | `igniteui-react-maps` (trial) `@infragistics/igniteui-react-maps` (licensed) | `igniteui-react-maps` |
|
|
28
|
+
|
|
11
29
|
## Example Usage
|
|
12
30
|
|
|
13
31
|
- "What component should I use to display a list of items with actions?"
|
|
@@ -58,9 +76,11 @@ This skill is organized into focused reference files. Load the appropriate file
|
|
|
58
76
|
|
|
59
77
|
---
|
|
60
78
|
|
|
61
|
-
## Quick Start
|
|
79
|
+
## Quick Start (Core UI Example)
|
|
80
|
+
|
|
81
|
+
This example uses the core UI package `igniteui-react`. For grids, Grid Lite, charts, gauges, and maps, use the package routing table above first.
|
|
62
82
|
|
|
63
|
-
### 1. Install
|
|
83
|
+
### 1. Install Core UI Package
|
|
64
84
|
|
|
65
85
|
```bash
|
|
66
86
|
npm install igniteui-react
|
|
@@ -143,7 +163,7 @@ Use [COMPONENT-CATALOGUE.md](./reference/COMPONENT-CATALOGUE.md) to map any UI n
|
|
|
143
163
|
|
|
144
164
|
## Best Practices
|
|
145
165
|
|
|
146
|
-
1. **
|
|
166
|
+
1. **Use the package routing table first**
|
|
147
167
|
2. **Import theme CSS first** — components need it to render correctly
|
|
148
168
|
3. **Register chart/gauge/map modules** — call `.register()` at module level
|
|
149
169
|
4. **Wrap charts/gauges/maps in sized containers** — they need explicit dimensions
|
|
@@ -7,6 +7,7 @@ export declare class BaseIgrTsProject implements ProjectTemplate {
|
|
|
7
7
|
projectType: string;
|
|
8
8
|
dependencies: string[];
|
|
9
9
|
hasExtraConfiguration: boolean;
|
|
10
|
+
isHidden: boolean;
|
|
10
11
|
delimiters: import("@igniteui/cli-core").TemplateDelimiters;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
generateConfig(name: string, theme: string, ...options: any[]): {
|
|
@@ -8,6 +8,7 @@ export declare class BaseWithHomeIgrTsProject extends BaseIgrTsProject implement
|
|
|
8
8
|
framework: string;
|
|
9
9
|
projectType: string;
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: BaseWithHomeIgrTsProject;
|
|
@@ -36,6 +36,7 @@ class BaseWithHomeIgrTsProject extends _base_1.BaseIgrTsProject {
|
|
|
36
36
|
this.framework = "react";
|
|
37
37
|
this.projectType = "igr-ts";
|
|
38
38
|
this.hasExtraConfiguration = false;
|
|
39
|
+
this.isHidden = true;
|
|
39
40
|
}
|
|
40
41
|
get templatePaths() {
|
|
41
42
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,7 @@ export declare class BasePageIgrTsProject extends BaseIgrTsProject implements Pr
|
|
|
8
8
|
framework: string;
|
|
9
9
|
projectType: string;
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: BasePageIgrTsProject;
|
|
@@ -36,6 +36,7 @@ class BasePageIgrTsProject extends _base_1.BaseIgrTsProject {
|
|
|
36
36
|
this.framework = "react";
|
|
37
37
|
this.projectType = "igr-ts";
|
|
38
38
|
this.hasExtraConfiguration = false;
|
|
39
|
+
this.isHidden = true;
|
|
39
40
|
}
|
|
40
41
|
get templatePaths() {
|
|
41
42
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,7 @@ export declare class EmptyIgrTsProject extends BaseWithHomeIgrTsProject implemen
|
|
|
8
8
|
framework: string;
|
|
9
9
|
projectType: string;
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: EmptyIgrTsProject;
|
|
@@ -36,6 +36,7 @@ class EmptyIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
|
|
|
36
36
|
this.framework = "react";
|
|
37
37
|
this.projectType = "igr-ts";
|
|
38
38
|
this.hasExtraConfiguration = false;
|
|
39
|
+
this.isHidden = false;
|
|
39
40
|
}
|
|
40
41
|
get templatePaths() {
|
|
41
42
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,7 @@ export declare class TopNavIgrTsProject extends BaseWithHomeIgrTsProject impleme
|
|
|
8
8
|
framework: string;
|
|
9
9
|
projectType: string;
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: TopNavIgrTsProject;
|
|
@@ -36,6 +36,7 @@ class TopNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
|
|
|
36
36
|
this.framework = "react";
|
|
37
37
|
this.projectType = "igr-ts";
|
|
38
38
|
this.hasExtraConfiguration = false;
|
|
39
|
+
this.isHidden = false;
|
|
39
40
|
}
|
|
40
41
|
get templatePaths() {
|
|
41
42
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,12 @@ user-invocable: true
|
|
|
8
8
|
|
|
9
9
|
This skill helps AI agents and developers identify the best Ignite UI components for any UI requirement, then provides direct links to official documentation, usage examples, and API references.
|
|
10
10
|
|
|
11
|
+
## Before You Answer
|
|
12
|
+
|
|
13
|
+
- Choose the package before writing imports or install steps.
|
|
14
|
+
- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
|
|
15
|
+
- If the user also needs setup or code, then load [igniteui-wc-integrate-with-framework](../igniteui-wc-integrate-with-framework/SKILL.md).
|
|
16
|
+
|
|
11
17
|
## Example Usage
|
|
12
18
|
|
|
13
19
|
- "What component should I use to display a list of items with actions?"
|
|
@@ -46,10 +52,31 @@ Ignite UI for Web Components is distributed across several packages depending on
|
|
|
46
52
|
| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities |
|
|
47
53
|
| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
|
|
48
54
|
| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
|
|
55
|
+
| [`igniteui-webcomponents-grids`](https://www.npmjs.com/package/igniteui-webcomponents-grids) | Commercial | `npm install igniteui-webcomponents-grids` (trial) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities |
|
|
56
|
+
| [`@infragistics/igniteui-webcomponents-grids`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-grids) | Commercial | `npm install @infragistics/igniteui-webcomponents-grids` (licensed) | Advanced data grids (Data Grid, Tree Grid, Hierarchical Grid, Pivot Grid) with many built-in functionalities |
|
|
57
|
+
| [`igniteui-grid-lite`](https://www.npmjs.com/package/igniteui-grid-lite) | MIT | `npm install igniteui-grid-lite` | Lightweight data grid for simpler tabular data |
|
|
58
|
+
| [`igniteui-dockmanager`](https://www.npmjs.com/package/igniteui-dockmanager) | Commercial | `npm install igniteui-dockmanager` (trial) | Windowing / docking layouts (IDE-style panels) |
|
|
59
|
+
| [`@infragistics/igniteui-dockmanager`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-dockmanager) | Commercial | `npm install @infragistics/igniteui-dockmanager` (licensed) | Windowing / docking layouts (IDE-style panels) |
|
|
49
60
|
| [`igniteui-webcomponents-charts`](https://www.npmjs.com/package/igniteui-webcomponents-charts) | Commercial | `npm install igniteui-webcomponents-core igniteui-webcomponents-charts` (trial) | Charts and data visualizations (65+ chart types) |
|
|
61
|
+
| [`@infragistics/igniteui-webcomponents-charts`](https://packages.infragistics.com/feeds/js-licensed/@infragistics/igniteui-webcomponents-charts) | Commercial | `npm install @infragistics/igniteui-webcomponents-core @infragistics/igniteui-webcomponents-charts` (licensed) | Charts and data visualizations (65+ chart types) |
|
|
50
62
|
|
|
51
63
|
---
|
|
52
64
|
|
|
65
|
+
## Package Routing
|
|
66
|
+
|
|
67
|
+
| Component family | Package |
|
|
68
|
+
|---|---|
|
|
69
|
+
| General UI components | `igniteui-webcomponents` |
|
|
70
|
+
| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
|
|
71
|
+
| Grid Lite | `igniteui-grid-lite` |
|
|
72
|
+
| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
|
|
73
|
+
| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |
|
|
74
|
+
|
|
75
|
+
If the request only says "grid", choose by features:
|
|
76
|
+
|
|
77
|
+
- Advanced features such as editing, paging, summaries, grouping, hierarchical data, or pivot behavior -> `igniteui-webcomponents-grids`
|
|
78
|
+
- Lightweight table -> `igniteui-grid-lite`
|
|
79
|
+
|
|
53
80
|
## Component Catalogue by UI Pattern
|
|
54
81
|
|
|
55
82
|
Use the table below to map a UI need to the right component, then follow the documentation link.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: igniteui-wc-integrate-with-framework
|
|
3
|
-
description: Integrate
|
|
3
|
+
description: Integrate Ignite UI Web Components packages into React, Angular, Vue, or vanilla JS applications with framework-specific configurations
|
|
4
4
|
user-invocable: true
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -8,6 +8,27 @@ user-invocable: true
|
|
|
8
8
|
|
|
9
9
|
This skill helps users integrate Ignite UI Web Components into their application. It detects the framework or platform in use and loads the appropriate step-by-step integration reference.
|
|
10
10
|
|
|
11
|
+
## Before You Answer
|
|
12
|
+
|
|
13
|
+
- Choose the package first, then load the framework reference.
|
|
14
|
+
- Do not assume every setup flow uses `igniteui-webcomponents`.
|
|
15
|
+
- If the required package is not present in `package.json`, add or install the correct Ignite UI dependency first. Absence from `package.json` does not mean the package is invalid.
|
|
16
|
+
|
|
17
|
+
### Package Routing
|
|
18
|
+
|
|
19
|
+
| Component family | Package |
|
|
20
|
+
|---|---|
|
|
21
|
+
| General UI components | `igniteui-webcomponents` |
|
|
22
|
+
| Advanced grids | `igniteui-webcomponents-grids` (trial) `@infragistics/igniteui-webcomponents-grids` (licensed) |
|
|
23
|
+
| Grid Lite | `igniteui-grid-lite` |
|
|
24
|
+
| Dock Manager | `igniteui-dockmanager` (trial) `@infragistics/igniteui-dockmanager` (licensed) |
|
|
25
|
+
| Charts | `igniteui-webcomponents-charts` (trial) `@infragistics/igniteui-webcomponents-charts` (licensed) |
|
|
26
|
+
|
|
27
|
+
If the request only says "grid", infer the package from the requested features:
|
|
28
|
+
|
|
29
|
+
- Use `igniteui-webcomponents-grids` for editing, paging, sorting, filtering, summaries, grouping, hierarchical data, or pivot features.
|
|
30
|
+
- Use `igniteui-grid-lite` for lightweight tabular data.
|
|
31
|
+
|
|
11
32
|
## Example Usage
|
|
12
33
|
|
|
13
34
|
- "How do I use igniteui-webcomponents in my React app?"
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Integrating Ignite UI Web Components — Angular
|
|
2
2
|
|
|
3
|
+
> Package note: This page shows the default setup for `igniteui-webcomponents`. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, replace the package-specific install, import, and registration steps below with that package's setup instead of the default one.
|
|
4
|
+
|
|
3
5
|
## Installation
|
|
4
6
|
|
|
5
7
|
```bash
|
|
@@ -11,6 +11,8 @@ React integration uses the **`igniteui-react`** package, which provides React-na
|
|
|
11
11
|
|
|
12
12
|
Components use the `Igr` prefix (e.g. `IgrButton`, `IgrInput`, `IgrCombo`).
|
|
13
13
|
|
|
14
|
+
> Package note: This page shows the default React wrapper setup for general UI components. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, do not reuse the `igniteui-react` and `Igr*` guidance below as-is; switch to the selected package's setup instead.
|
|
15
|
+
|
|
14
16
|
### Installation
|
|
15
17
|
|
|
16
18
|
```bash
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Integrating Ignite UI Web Components — Vanilla JavaScript / HTML
|
|
2
2
|
|
|
3
|
+
> Package note: This page shows the default setup for `igniteui-webcomponents`. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, replace the package-specific install, import, and registration steps below with that package's setup instead of the default one.
|
|
4
|
+
|
|
3
5
|
## Installation
|
|
4
6
|
|
|
5
7
|
```bash
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Integrating Ignite UI Web Components — Vue 3
|
|
2
2
|
|
|
3
|
+
> Package note: This page shows the default setup for `igniteui-webcomponents`. If the routing step selected `igniteui-webcomponents-charts`, `igniteui-webcomponents-grids`, `igniteui-grid-lite`, or `igniteui-dockmanager`, replace the package-specific install, import, and registration steps below with that package's setup instead of the default one.
|
|
4
|
+
|
|
3
5
|
## Installation
|
|
4
6
|
|
|
5
7
|
```bash
|
|
@@ -7,6 +7,7 @@ export declare class BaseIgcProject implements ProjectTemplate {
|
|
|
7
7
|
framework: string;
|
|
8
8
|
projectType: string;
|
|
9
9
|
hasExtraConfiguration: boolean;
|
|
10
|
+
isHidden: boolean;
|
|
10
11
|
delimiters: import("@igniteui/cli-core").TemplateDelimiters;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
installModules(): void;
|
|
@@ -32,6 +32,7 @@ class BaseWithHomeIgcProject extends _base_1.BaseIgcProject {
|
|
|
32
32
|
this.id = "base with home";
|
|
33
33
|
this.name = "Base With Home";
|
|
34
34
|
this.description = "Empty project layout structure for Ignite UI for Web Components";
|
|
35
|
+
this.isHidden = true;
|
|
35
36
|
}
|
|
36
37
|
get templatePaths() {
|
|
37
38
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,7 @@ export declare class BasePageTemplate extends BaseIgcProject implements ProjectT
|
|
|
8
8
|
projectType: string;
|
|
9
9
|
dependencies: string[];
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: BasePageTemplate;
|
|
@@ -35,6 +35,7 @@ class BasePageTemplate extends _base_1.BaseIgcProject {
|
|
|
35
35
|
this.framework = "webcomponents";
|
|
36
36
|
this.projectType = "igc-ts";
|
|
37
37
|
this.hasExtraConfiguration = false;
|
|
38
|
+
this.isHidden = true;
|
|
38
39
|
}
|
|
39
40
|
get templatePaths() {
|
|
40
41
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,7 @@ export declare class EmptyPageTemplate extends BaseWithHomeIgcProject implements
|
|
|
8
8
|
projectType: string;
|
|
9
9
|
dependencies: string[];
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: EmptyPageTemplate;
|
|
@@ -35,6 +35,7 @@ class EmptyPageTemplate extends _base_with_home_1.BaseWithHomeIgcProject {
|
|
|
35
35
|
this.framework = "webcomponents";
|
|
36
36
|
this.projectType = "igc-ts";
|
|
37
37
|
this.hasExtraConfiguration = false;
|
|
38
|
+
this.isHidden = false;
|
|
38
39
|
}
|
|
39
40
|
get templatePaths() {
|
|
40
41
|
return [...super.templatePaths, path.join(__dirname, "files")];
|
|
@@ -8,6 +8,7 @@ export declare class SideNavProject extends BaseWithHomeIgcProject implements Pr
|
|
|
8
8
|
projectType: string;
|
|
9
9
|
dependencies: string[];
|
|
10
10
|
hasExtraConfiguration: boolean;
|
|
11
|
+
isHidden: boolean;
|
|
11
12
|
get templatePaths(): string[];
|
|
12
13
|
}
|
|
13
14
|
declare const _default: SideNavProject;
|
|
@@ -35,6 +35,7 @@ class SideNavProject extends _base_with_home_1.BaseWithHomeIgcProject {
|
|
|
35
35
|
this.framework = "webcomponents";
|
|
36
36
|
this.projectType = "igc-ts";
|
|
37
37
|
this.hasExtraConfiguration = false;
|
|
38
|
+
this.isHidden = false;
|
|
38
39
|
}
|
|
39
40
|
get templatePaths() {
|
|
40
41
|
return [...super.templatePaths, path.join(__dirname, "files")];
|