igniteui-cli 15.0.0-rc.3 → 15.0.1
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/README.md +7 -1
- package/lib/cli.js +36 -40
- package/lib/commands/add.js +29 -15
- package/lib/commands/ai-config.js +2 -2
- package/lib/commands/build.js +3 -5
- package/lib/commands/config.js +10 -14
- package/lib/commands/doc.js +4 -5
- package/lib/commands/generate.js +5 -7
- package/lib/commands/list.js +46 -7
- package/lib/commands/mcp.js +1 -2
- package/lib/commands/new.js +11 -6
- package/lib/commands/start.js +3 -4
- package/lib/commands/test.js +3 -4
- package/lib/commands/types.d.ts +0 -15
- package/lib/commands/types.js +0 -27
- package/lib/commands/upgrade.js +4 -4
- package/package.json +5 -5
- package/templates/react/igr-ts/grid/basic/index.js +1 -1
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/README.md +10 -1
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md +19 -11
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +3 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +3 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/MCP-SERVER.md +77 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/SKILL.md +22 -12
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/SKILL.md +229 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md +146 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/reference/gotchas.md +200 -0
- package/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json +1 -1
- package/templates/react/igr-ts/projects/_base/files/package.json +1 -1
- package/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.ts +7 -5
- package/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts +1 -1
- package/templates/webcomponents/igc-ts/dock-manager/default/index.js +1 -1
- package/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +1 -1
- package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts +1 -1
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/README.md +3 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md +20 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/reference/mcp-setup.md +82 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-generate-from-image-design/SKILL.md +228 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md +130 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-generate-from-image-design/references/gotchas.md +147 -0
- package/templates/webcomponents/igc-ts/projects/_base/files/__dot__vscode/mcp.json +1 -1
- package/templates/webcomponents/igc-ts/projects/_base/files/eslint.config.js +5 -3
- package/templates/webcomponents/igc-ts/projects/_base/files/index.html +1 -1
- package/templates/webcomponents/igc-ts/projects/_base/files/package.json +7 -22
- package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app-routing.ts +1 -1
- package/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.json +22 -29
- package/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts +3 -4
- package/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html +1 -1
- package/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json +8 -23
- package/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/app-routing.ts +1 -1
- package/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts +11 -8
- package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md +0 -125
- package/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.test.json +0 -14
|
@@ -1,34 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"compilerOptions": {
|
|
3
|
-
"target": "
|
|
4
|
-
"module": "es2022",
|
|
5
|
-
"moduleResolution": "node",
|
|
6
|
-
"noEmitOnError": true,
|
|
7
|
-
"lib": [
|
|
8
|
-
"es2021",
|
|
9
|
-
"dom",
|
|
10
|
-
"dom.iterable"
|
|
11
|
-
],
|
|
12
|
-
"strict": true,
|
|
13
|
-
"skipLibCheck": true,
|
|
14
|
-
"esModuleInterop": false,
|
|
15
|
-
"allowSyntheticDefaultImports": true,
|
|
3
|
+
"target": "ES2023",
|
|
16
4
|
"experimentalDecorators": true,
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
5
|
+
"useDefineForClassFields": false,
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
|
8
|
+
"types": ["vite/client"],
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
|
|
11
|
+
/* Bundler mode */
|
|
12
|
+
"moduleResolution": "bundler",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"verbatimModuleSyntax": true,
|
|
15
|
+
"moduleDetection": "force",
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"erasableSyntaxOnly": true,
|
|
23
|
+
"noFallthroughCasesInSwitch": true,
|
|
24
|
+
"noUncheckedSideEffectImports": true
|
|
24
25
|
},
|
|
25
|
-
"
|
|
26
|
-
"test"
|
|
27
|
-
],
|
|
28
|
-
"files": [
|
|
29
|
-
"src/index.ts"
|
|
30
|
-
],
|
|
31
|
-
"include": [
|
|
32
|
-
"src/**/*.d.ts"
|
|
33
|
-
]
|
|
26
|
+
"include": ["src"]
|
|
34
27
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
/// <reference types="vitest/config" />
|
|
2
|
-
import { playwright } from '@vitest/browser-playwright'
|
|
3
|
-
import { defineConfig } from 'vite'
|
|
1
|
+
/// <reference types="vitest/config" />
|
|
2
|
+
import { playwright } from '@vitest/browser-playwright'
|
|
3
|
+
import { defineConfig } from 'vite'
|
|
4
4
|
import { VitePWA } from 'vite-plugin-pwa';
|
|
5
5
|
import { viteStaticCopy } from 'vite-plugin-static-copy';
|
|
6
6
|
|
|
@@ -19,7 +19,6 @@ export default defineConfig({
|
|
|
19
19
|
},
|
|
20
20
|
target: 'es2021',
|
|
21
21
|
minify: 'terser',
|
|
22
|
-
emptyOutDir: false,
|
|
23
22
|
chunkSizeWarningLimit: 10 * 1024 * 1024 // 10 MB
|
|
24
23
|
},
|
|
25
24
|
test: {
|
|
@@ -3,51 +3,36 @@
|
|
|
3
3
|
"version": "0.0.0",
|
|
4
4
|
"private": true,
|
|
5
5
|
"description": "WebComponents project for Ignite UI CLI",
|
|
6
|
-
"license": "MIT",
|
|
7
|
-
"author": "Infragistics",
|
|
8
|
-
"main": "dist/src/index.js",
|
|
9
|
-
"module": "dist/src/index.js",
|
|
10
6
|
"type": "module",
|
|
11
|
-
"exports": {
|
|
12
|
-
".": "./dist/src/index.js",
|
|
13
|
-
"./$(dashName).js": "./dist/src/$(dashName).js"
|
|
14
|
-
},
|
|
15
7
|
"scripts": {
|
|
16
|
-
"start": "
|
|
17
|
-
"build": "
|
|
8
|
+
"start": "vite --open",
|
|
9
|
+
"build": "vite build",
|
|
18
10
|
"start:build": "vite preview --open",
|
|
19
|
-
"lint": "eslint",
|
|
20
|
-
"test": "
|
|
11
|
+
"lint": "eslint",
|
|
12
|
+
"test": "vitest"
|
|
21
13
|
},
|
|
22
14
|
"dependencies": {
|
|
23
15
|
"@vaadin/router": "^2.0.0",
|
|
24
16
|
"@igniteui/material-icons-extended": "^3.0.2",
|
|
25
|
-
"igniteui-dockmanager": "^2.1.
|
|
26
|
-
"igniteui-webcomponents": "~7.1.
|
|
17
|
+
"igniteui-dockmanager": "^2.1.1",
|
|
18
|
+
"igniteui-webcomponents": "~7.1.3",
|
|
27
19
|
"igniteui-webcomponents-charts": "~7.0.0",
|
|
28
20
|
"igniteui-webcomponents-core": "~7.0.0",
|
|
29
21
|
"igniteui-webcomponents-gauges": "~7.0.0",
|
|
30
22
|
"igniteui-webcomponents-grids": "~7.0.0",
|
|
31
23
|
"igniteui-webcomponents-inputs": "~7.0.0",
|
|
32
24
|
"igniteui-webcomponents-layouts": "~7.0.0",
|
|
33
|
-
"lit": "^3.3.2"
|
|
34
|
-
"typescript": "^5.9.3"
|
|
25
|
+
"lit": "^3.3.2"
|
|
35
26
|
},
|
|
36
27
|
"devDependencies": {
|
|
37
28
|
"@eslint/js": "^9.39.4",
|
|
38
|
-
"@babel/preset-env": "^7.28.3",
|
|
39
29
|
"@vitest/browser-playwright": "^4.1.0",
|
|
40
|
-
"babel-plugin-template-html-minifier": "^4.1.0",
|
|
41
|
-
"concurrently": "^9.2.1",
|
|
42
|
-
"deepmerge": "^4.3.1",
|
|
43
30
|
"eslint": "^9.39.4",
|
|
44
31
|
"eslint-plugin-lit": "^2.2.1",
|
|
45
32
|
"globals": "^17.4.0",
|
|
46
33
|
"igniteui-cli": "~$(cliVersion)",
|
|
47
34
|
"playwright": "^1.58.2",
|
|
48
|
-
"
|
|
49
|
-
"source-map": "^0.7.6",
|
|
50
|
-
"tslib": "^2.8.1",
|
|
35
|
+
"typescript": "^5.9.3",
|
|
51
36
|
"typescript-eslint": "^8.57.0",
|
|
52
37
|
"vite": "^7.0.0",
|
|
53
38
|
"vite-plugin-pwa": "^1.2.0",
|
|
@@ -16,29 +16,32 @@ defineComponents(
|
|
|
16
16
|
@customElement('app-root')
|
|
17
17
|
export default class App extends LitElement {
|
|
18
18
|
static styles = css`
|
|
19
|
+
:host {
|
|
20
|
+
display: flex;
|
|
21
|
+
height: 100%;
|
|
22
|
+
}
|
|
23
|
+
|
|
19
24
|
router-outlet {
|
|
20
25
|
height: 100%;
|
|
26
|
+
width: 100%;
|
|
21
27
|
display: flex;
|
|
22
28
|
text-align: center;
|
|
23
29
|
flex-flow: column nowrap;
|
|
24
30
|
justify-content: stretch;
|
|
25
31
|
align-items: center;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
igc-nav-drawer {
|
|
30
|
-
float: left;
|
|
32
|
+
padding: 1rem;
|
|
33
|
+
box-sizing: border-box;
|
|
31
34
|
}
|
|
32
35
|
`;
|
|
33
36
|
|
|
34
37
|
render() {
|
|
35
38
|
return html`
|
|
36
|
-
<igc-nav-drawer open
|
|
39
|
+
<igc-nav-drawer open position="relative">
|
|
37
40
|
<igc-nav-drawer-header-item>Ignite UI CLI</igc-nav-drawer-header-item>
|
|
38
|
-
${routes.filter(route => route.name).map(({path, name}) => html`
|
|
41
|
+
${routes.filter(route => route.name).map(({path, name}) => html`
|
|
39
42
|
<igc-nav-drawer-item>
|
|
40
43
|
<span slot="content">
|
|
41
|
-
<a href="${path}">${name}<igc-ripple></igc-ripple></a>
|
|
44
|
+
<a href="${path}">${name}<igc-ripple></igc-ripple></a>
|
|
42
45
|
</span>
|
|
43
46
|
</igc-nav-drawer-item>
|
|
44
47
|
`)}
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
# Sass Theming
|
|
2
|
-
|
|
3
|
-
> Requires Sass configured in the project (e.g., `sass` in `devDependencies` and Vite/webpack configured to handle `.scss` files).
|
|
4
|
-
|
|
5
|
-
## Basic Setup
|
|
6
|
-
|
|
7
|
-
```scss
|
|
8
|
-
// src/styles.scss
|
|
9
|
-
@use 'igniteui-theming' as *;
|
|
10
|
-
|
|
11
|
-
// 1. Define a palette
|
|
12
|
-
$my-palette: palette(
|
|
13
|
-
$primary: #1976D2,
|
|
14
|
-
$secondary: #FF9800,
|
|
15
|
-
$surface: #FAFAFA
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
// 2. Apply the palette
|
|
19
|
-
@include palette($my-palette);
|
|
20
|
-
|
|
21
|
-
// 3. Optional: Typography
|
|
22
|
-
@include typography($font-family: "'Roboto', sans-serif");
|
|
23
|
-
|
|
24
|
-
// 4. Optional: Elevations
|
|
25
|
-
@include elevations();
|
|
26
|
-
|
|
27
|
-
// 5. Optional: Spacing
|
|
28
|
-
@include spacing();
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Import in your React entry point:
|
|
32
|
-
|
|
33
|
-
```tsx
|
|
34
|
-
// main.tsx
|
|
35
|
-
import './styles.scss';
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## Dark Theme
|
|
39
|
-
|
|
40
|
-
For dark themes, use a dark surface color and a dark schema:
|
|
41
|
-
|
|
42
|
-
```scss
|
|
43
|
-
@use 'igniteui-theming' as *;
|
|
44
|
-
|
|
45
|
-
$dark-palette: palette(
|
|
46
|
-
$primary: #90CAF9,
|
|
47
|
-
$secondary: #FFB74D,
|
|
48
|
-
$surface: #121212
|
|
49
|
-
);
|
|
50
|
-
|
|
51
|
-
@include palette($dark-palette, $schema: $dark-material-schema);
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
> **Important:** Use `@use 'igniteui-theming'` — not `igniteui-angular/theming` or Angular-specific `core()` / `theme()` mixins.
|
|
55
|
-
|
|
56
|
-
## Component-Level Theming with Sass
|
|
57
|
-
|
|
58
|
-
When Sass is configured, use component theme functions and the `tokens` mixin:
|
|
59
|
-
|
|
60
|
-
```scss
|
|
61
|
-
@use 'igniteui-theming' as *;
|
|
62
|
-
|
|
63
|
-
$custom-avatar: avatar-theme(
|
|
64
|
-
$schema: $light-material-schema,
|
|
65
|
-
$background: var(--ig-primary-500),
|
|
66
|
-
$color: var(--ig-primary-500-contrast)
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
igc-avatar {
|
|
70
|
-
@include tokens($custom-avatar);
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
## Light/Dark Toggle with Sass
|
|
75
|
-
|
|
76
|
-
```scss
|
|
77
|
-
@use 'igniteui-theming' as *;
|
|
78
|
-
|
|
79
|
-
$light-palette: palette($primary: #1976D2, $secondary: #FF9800, $surface: #FAFAFA);
|
|
80
|
-
$dark-palette: palette($primary: #90CAF9, $secondary: #FFB74D, $surface: #121212);
|
|
81
|
-
|
|
82
|
-
@include typography($font-family: "'Roboto', sans-serif");
|
|
83
|
-
@include elevations();
|
|
84
|
-
|
|
85
|
-
// Light is default
|
|
86
|
-
@include palette($light-palette, $schema: $light-material-schema);
|
|
87
|
-
|
|
88
|
-
// Dark via class on a container or <body>
|
|
89
|
-
.dark-theme {
|
|
90
|
-
@include palette($dark-palette, $schema: $dark-material-schema);
|
|
91
|
-
}
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
## Theming Architecture
|
|
95
|
-
|
|
96
|
-
The Ignite UI theming system is built on four pillars:
|
|
97
|
-
|
|
98
|
-
| Concept | Purpose |
|
|
99
|
-
|---|---|
|
|
100
|
-
| **Palette** | Color system with primary, secondary, surface, gray, info, success, warn, error families, each with shades 50–900 + accents A100–A700 |
|
|
101
|
-
| **Typography** | Font family, type scale (h1–h6, subtitle, body, button, caption, overline) |
|
|
102
|
-
| **Elevations** | Box-shadow levels 0–24 for visual depth |
|
|
103
|
-
| **Schema** | Per-component recipes mapping palette colors to component tokens |
|
|
104
|
-
|
|
105
|
-
### Design Systems
|
|
106
|
-
|
|
107
|
-
Four built-in design systems are available:
|
|
108
|
-
|
|
109
|
-
- **Material** (default) — Material Design 3
|
|
110
|
-
- **Bootstrap** — Bootstrap-inspired
|
|
111
|
-
- **Fluent** — Microsoft Fluent Design
|
|
112
|
-
- **Indigo** — Infragistics Indigo Design
|
|
113
|
-
|
|
114
|
-
Each has light and dark variants (e.g., `$light-material-schema`, `$dark-fluent-schema`).
|
|
115
|
-
|
|
116
|
-
### Palette Shades
|
|
117
|
-
|
|
118
|
-
- Shades 50 = lightest, 900 = darkest for all chromatic colors
|
|
119
|
-
- Surface color must match the variant — light color for `light`, dark color for `dark`
|
|
120
|
-
|
|
121
|
-
## Key Rules
|
|
122
|
-
|
|
123
|
-
1. **Sass**: Use `@use 'igniteui-theming'` — not `igniteui-angular/theming`
|
|
124
|
-
2. **Sass**: Component themes use `@include tokens($theme)` inside a selector
|
|
125
|
-
3. **Never hardcode colors after palette generation** — use `var(--ig-<family>-<shade>)` palette tokens everywhere
|