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.
Files changed (53) hide show
  1. package/README.md +7 -1
  2. package/lib/cli.js +36 -40
  3. package/lib/commands/add.js +29 -15
  4. package/lib/commands/ai-config.js +2 -2
  5. package/lib/commands/build.js +3 -5
  6. package/lib/commands/config.js +10 -14
  7. package/lib/commands/doc.js +4 -5
  8. package/lib/commands/generate.js +5 -7
  9. package/lib/commands/list.js +46 -7
  10. package/lib/commands/mcp.js +1 -2
  11. package/lib/commands/new.js +11 -6
  12. package/lib/commands/start.js +3 -4
  13. package/lib/commands/test.js +3 -4
  14. package/lib/commands/types.d.ts +0 -15
  15. package/lib/commands/types.js +0 -27
  16. package/lib/commands/upgrade.js +4 -4
  17. package/package.json +5 -5
  18. package/templates/react/igr-ts/grid/basic/index.js +1 -1
  19. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/README.md +10 -1
  20. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/SKILL.md +19 -11
  21. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +3 -0
  22. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +3 -0
  23. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-components/reference/MCP-SERVER.md +77 -0
  24. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/SKILL.md +22 -12
  25. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/SKILL.md +229 -0
  26. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md +146 -0
  27. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-generate-from-image-design/reference/gotchas.md +200 -0
  28. package/templates/react/igr-ts/projects/_base/files/__dot__vscode/mcp.json +1 -1
  29. package/templates/react/igr-ts/projects/_base/files/package.json +1 -1
  30. package/templates/webcomponents/igc-ts/card/default/files/src/app/__path__/__filePrefix__.ts +7 -5
  31. package/templates/webcomponents/igc-ts/dock-manager/default/files/src/app/__path__/__filePrefix__.ts +1 -1
  32. package/templates/webcomponents/igc-ts/dock-manager/default/index.js +1 -1
  33. package/templates/webcomponents/igc-ts/grid/default/files/src/app/__path__/__filePrefix__.ts +1 -1
  34. package/templates/webcomponents/igc-ts/grid/grid-editing/files/src/app/__path__/__filePrefix__.ts +1 -1
  35. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/README.md +3 -0
  36. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/SKILL.md +20 -0
  37. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-choose-components/reference/mcp-setup.md +82 -0
  38. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-generate-from-image-design/SKILL.md +228 -0
  39. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md +130 -0
  40. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__claude/skills/igniteui-wc-generate-from-image-design/references/gotchas.md +147 -0
  41. package/templates/webcomponents/igc-ts/projects/_base/files/__dot__vscode/mcp.json +1 -1
  42. package/templates/webcomponents/igc-ts/projects/_base/files/eslint.config.js +5 -3
  43. package/templates/webcomponents/igc-ts/projects/_base/files/index.html +1 -1
  44. package/templates/webcomponents/igc-ts/projects/_base/files/package.json +7 -22
  45. package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app-routing.ts +1 -1
  46. package/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.json +22 -29
  47. package/templates/webcomponents/igc-ts/projects/_base/files/vite.config.ts +3 -4
  48. package/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html +1 -1
  49. package/templates/webcomponents/igc-ts/projects/_base_with_home/files/package.json +8 -23
  50. package/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/app-routing.ts +1 -1
  51. package/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts +11 -8
  52. package/templates/react/igr-ts/projects/_base/files/__dot__claude/skills/igniteui-react-customize-theme/reference/SASS-THEMING.md +0 -125
  53. package/templates/webcomponents/igc-ts/projects/_base/files/tsconfig.test.json +0 -14
@@ -1,34 +1,27 @@
1
1
  {
2
2
  "compilerOptions": {
3
- "target": "es2021",
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
- "importHelpers": true,
18
- "outDir": "dist",
19
- "sourceMap": true,
20
- "inlineSources": true,
21
- "rootDir": "./",
22
- "declaration": true,
23
- "incremental": true
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
- "exclude": [
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: {
@@ -12,7 +12,7 @@
12
12
  <body class="ig-scrollbar">
13
13
  <app-root></app-root>
14
14
 
15
- <script type="module" src="./dist/src/index.js"></script>
15
+ <script type="module" src="./src/index.ts"></script>
16
16
  </body>
17
17
 
18
18
  </html>
@@ -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": "tsc && concurrently -k -r \"tsc --watch\" \"vite\"",
17
- "build": "rimraf dist && tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite.js build",
8
+ "start": "vite --open",
9
+ "build": "vite build",
18
10
  "start:build": "vite preview --open",
19
- "lint": "eslint",
20
- "test": "tsc --project tsconfig.test.json && vitest run"
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.0",
26
- "igniteui-webcomponents": "~7.1.0",
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
- "rimraf": "^6.1.3",
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",
@@ -1,4 +1,4 @@
1
- import { Route } from '@vaadin/router';
1
+ import { type Route } from '@vaadin/router';
2
2
  import './home/home.js';
3
3
  import './not-found/not-found.js';
4
4
 
@@ -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
- overflow: inherit;
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="true" position="relative">
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
@@ -1,14 +0,0 @@
1
-
2
- {
3
- "extends": "./tsconfig.json",
4
- "compilerOptions": {
5
- "outDir": "test"
6
- },
7
- "exclude": [
8
- "dist",
9
- "test"
10
- ],
11
- "include": [
12
- "**/*.ts"
13
- ]
14
- }