From 9659f05d3e11d94dc39485f250a09f4332a7fa83 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 27 Mar 2026 16:59:08 +0000
Subject: [PATCH 01/10] feat(igr-ts): add avatar, badge, and button React
component templates
Add new React component templates for Avatar, Badge, and Button
in the igr-ts project type. Each includes component-level and
template-level index.ts, a .tsx component file, test file, and
style.module.css. Update groups.json with Layouts and Data Entry
& Display groups.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
---
.../src/app/__path__/__filePrefix__.test.tsx | 13 +++++++++++++
.../files/src/app/__path__/__filePrefix__.tsx | 16 ++++++++++++++++
.../files/src/app/__path__/style.module.css | 9 +++++++++
.../react/igr-ts/avatar/default/index.ts | 16 ++++++++++++++++
.../cli/templates/react/igr-ts/avatar/index.ts | 11 +++++++++++
.../src/app/__path__/__filePrefix__.test.tsx | 13 +++++++++++++
.../files/src/app/__path__/__filePrefix__.tsx | 16 ++++++++++++++++
.../files/src/app/__path__/style.module.css | 9 +++++++++
.../react/igr-ts/badge/default/index.ts | 16 ++++++++++++++++
.../cli/templates/react/igr-ts/badge/index.ts | 11 +++++++++++
.../src/app/__path__/__filePrefix__.test.tsx | 13 +++++++++++++
.../files/src/app/__path__/__filePrefix__.tsx | 14 ++++++++++++++
.../files/src/app/__path__/style.module.css | 9 +++++++++
.../react/igr-ts/button/default/index.ts | 16 ++++++++++++++++
.../cli/templates/react/igr-ts/button/index.ts | 11 +++++++++++
packages/cli/templates/react/igr-ts/groups.json | 4 +++-
16 files changed, 196 insertions(+), 1 deletion(-)
create mode 100644 packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.test.tsx
create mode 100644 packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.tsx
create mode 100644 packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/style.module.css
create mode 100644 packages/cli/templates/react/igr-ts/avatar/default/index.ts
create mode 100644 packages/cli/templates/react/igr-ts/avatar/index.ts
create mode 100644 packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.test.tsx
create mode 100644 packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.tsx
create mode 100644 packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/style.module.css
create mode 100644 packages/cli/templates/react/igr-ts/badge/default/index.ts
create mode 100644 packages/cli/templates/react/igr-ts/badge/index.ts
create mode 100644 packages/cli/templates/react/igr-ts/button/default/files/src/app/__path__/__filePrefix__.test.tsx
create mode 100644 packages/cli/templates/react/igr-ts/button/default/files/src/app/__path__/__filePrefix__.tsx
create mode 100644 packages/cli/templates/react/igr-ts/button/default/files/src/app/__path__/style.module.css
create mode 100644 packages/cli/templates/react/igr-ts/button/default/index.ts
create mode 100644 packages/cli/templates/react/igr-ts/button/index.ts
diff --git a/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+ setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+ const wrapper = render(<$(ClassName) />);
+ expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..9f966c8bf
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,16 @@
+import style from './style.module.css';
+import { IgrAvatar } from 'igniteui-react';
+import 'igniteui-react/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+ );
+}
diff --git a/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+ padding-top: 24px;
+ display: flex;
+ flex-flow: row;
+ justify-content: space-around;
+}
+:local(.title) {
+ color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/avatar/default/index.ts b/packages/cli/templates/react/igr-ts/avatar/default/index.ts
new file mode 100644
index 000000000..caa4c29e6
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/avatar/default/index.ts
@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrAvatarTemplate extends IgniteUIForReactTemplate {
+ constructor() {
+ super(__dirname);
+ this.components = ["Avatar"];
+ this.controlGroup = "Layouts";
+ this.listInComponentTemplates = true;
+ this.id = "avatar";
+ this.projectType = "igr-ts";
+ this.name = "Avatar";
+ this.description = "displays an avatar with customizable shape, size, and initials.";
+ this.packages = ["igniteui-react@~19.5.2"];
+ }
+}
+module.exports = new IgrAvatarTemplate();
diff --git a/packages/cli/templates/react/igr-ts/avatar/index.ts b/packages/cli/templates/react/igr-ts/avatar/index.ts
new file mode 100644
index 000000000..6029bc1d7
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/avatar/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrAvatarComponent extends BaseComponent {
+ constructor() {
+ super(__dirname);
+ this.name = "Avatar";
+ this.group = "Layouts";
+ this.description = `displays an avatar with customizable shape, size, and initials.`;
+ }
+}
+module.exports = new IgrAvatarComponent();
diff --git a/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+ setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+ const wrapper = render(<$(ClassName) />);
+ expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..020719a74
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,16 @@
+import style from './style.module.css';
+import { IgrBadge } from 'igniteui-react';
+import 'igniteui-react/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+
Badge
+
+ Awaiting test
+ Critical issue
+ Verified
+
+
+
Button
+
+ Large button
+
+
Button Group
+
+
+ Left Center Right
+
+
+
Chip
+
+ Chip Content
+
+
+
Icon
+
+
+ Home icon:
+
+
+ Search icon:
+
+
+
+
Input
+
+
+ This is some helper text
+
+
+
+
Radio Group
+
+
+ Banana
+ Orange
+ Mango
+
+
+
+
Dropdown
+
+
+ Options Option 1 Option 2 Option 3
+
+
+
Accordion
+
+
+
+ Ignite UI for React
+ Ignite UI for React is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
+
+
+ Ignite UI for Angular
+ Ignite UI for Angular is a complete set of Material-based UI Widgets, Components and Sketch UI kits by Infragistics.
+
+
+ Ignite UI for Web Components
+ Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications.
+
+
+
+
+
Banner
+
+
+ You are currently not logged in! Please, log into your account first.
+
+
+
+
Card
+
+
+
+ New York City
+ City Guide
+
+
+ New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that's among the world's major commercial, financial and cultural centers.
+
+
+ Like Learn More
+
+
+
+
Circular Progress
+
+
+
) => {
+ event.preventDefault();
+ const formData = new FormData(event.currentTarget);
+ const entries = Array.from(formData.entries());
+ const result = entries.map(([key, value]) => `${key}=${value}`).join('; ');
+ alert(result);
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+ padding-top: 24px;
+ display: flex;
+ flex-flow: row;
+ justify-content: space-around;
+}
+:local(.title) {
+ color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/index.ts b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/index.ts
new file mode 100644
index 000000000..0a9c73063
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrSubscriptionFormTemplate extends IgniteUIForReactTemplate {
+constructor() {
+super(__dirname);
+this.listInComponentTemplates = false;
+this.listInCustomTemplates = true;
+this.id = "subscription-form";
+this.projectType = "igr-ts";
+this.name = "Subscription Form";
+this.description = "Subscription form with inputs, buttons and a checkbox inside";
+this.packages = ["igniteui-react@~19.5.2"];
+}
+}
+module.exports = new IgrSubscriptionFormTemplate();
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+ setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+ const wrapper = render(<$(ClassName) />);
+ expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..c05866ee5
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrDatePicker } from 'igniteui-react';
+import 'igniteui-react/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+ );
+}
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+ padding-top: 24px;
+ display: flex;
+ flex-flow: row;
+ justify-content: space-around;
+}
+:local(.title) {
+ color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/index.ts b/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
new file mode 100644
index 000000000..cb38aec51
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrDatePickerTemplate extends IgniteUIForReactTemplate {
+constructor() {
+super(__dirname);
+this.components = ["DatePicker"];
+this.controlGroup = "Scheduling";
+this.listInComponentTemplates = true;
+this.id = "date-picker";
+this.projectType = "igr-ts";
+this.name = "Date Picker";
+this.description = "basic IgrDatePicker";
+this.packages = ["igniteui-react@~19.5.2"];
+}
+}
+module.exports = new IgrDatePickerTemplate();
diff --git a/packages/cli/templates/react/igr-ts/date-picker/index.ts b/packages/cli/templates/react/igr-ts/date-picker/index.ts
new file mode 100644
index 000000000..d4616ec23
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDatePickerComponent extends BaseComponent {
+constructor() {
+super(__dirname);
+this.name = "Date Picker";
+this.group = "Scheduling";
+this.description = `displays date picker component`;
+}
+}
+module.exports = new IgrDatePickerComponent();
diff --git a/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+ setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+ const wrapper = render(<$(ClassName) />);
+ expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..34bb228f9
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,18 @@
+import style from './style.module.css';
+import { IgrDivider } from 'igniteui-react';
+import 'igniteui-react/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+
Divider
+
+
+
Content above
+
+
Content below
+
+
+
+
Expansion Panel
+
+
+ Expansion Panel Title
+ This is the content of the expansion panel. Click the header to expand or collapse this section.
+
+
+
+
List
+
+
+ Job Positions
+ Abraham Lee
+ Software Developer
+
+
+ John Smith
+ Team Lead
+
+
+ Jonathan Deberkow
+ UX Designer
+
+
+
+
+
Navbar
+
+
+ Home
+
+
+
+
Ripple
+
+
+ Button with ripple
+
+
+
+
Tabs
+
+
+ Albums Favourites Info Sgt. Peppers Lonely Hearts Club Band
The Dark Side of the Moon
Thriller
The Dark Side of the Moon
Led Zeppelin IV
+
+
+
Tree
+
+
+
+
+
+
+
+
+
+
+
) => {
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
index c05866ee5..d55d2ed7f 100644
--- a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrDatePicker } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
index 34bb228f9..4e1e2876a 100644
--- a/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrDivider } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/dropdown/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/dropdown/default/files/src/app/__path__/__filePrefix__.tsx
index ea5724d8b..082581368 100644
--- a/packages/cli/templates/react/igr-ts/dropdown/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/dropdown/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrDropdown, IgrDropdownItem, IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.tsx
index df21f848a..6195b6bcb 100644
--- a/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrExpansionPanel } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/form/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/form/default/files/src/app/__path__/__filePrefix__.tsx
index f06435d48..8388a4773 100644
--- a/packages/cli/templates/react/igr-ts/form/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/form/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrInput, IgrRadioGroup, IgrRadio } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/icon-button/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/icon-button/default/files/src/app/__path__/__filePrefix__.tsx
index ddf35d53f..d3049f52f 100644
--- a/packages/cli/templates/react/igr-ts/icon-button/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/icon-button/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrIconButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/icon/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/icon/default/files/src/app/__path__/__filePrefix__.tsx
index a86263d4d..4d7e04354 100644
--- a/packages/cli/templates/react/igr-ts/icon/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/icon/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrIcon } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/input/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/input/default/files/src/app/__path__/__filePrefix__.tsx
index 371075047..592f40622 100644
--- a/packages/cli/templates/react/igr-ts/input/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/input/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrInput } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.tsx
index ac72e3406..1aa007661 100644
--- a/packages/cli/templates/react/igr-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrLinearProgress } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
index 33cfcaf69..d9ab008cc 100644
--- a/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/navbar/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/navbar/default/files/src/app/__path__/__filePrefix__.tsx
index fc90e0a28..119d668c2 100644
--- a/packages/cli/templates/react/igr-ts/navbar/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/navbar/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrNavbar } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/radio-group/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/radio-group/default/files/src/app/__path__/__filePrefix__.tsx
index f1bd5d8a0..23fe6182a 100644
--- a/packages/cli/templates/react/igr-ts/radio-group/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/radio-group/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrRadioGroup, IgrRadio } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/rating/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/rating/default/files/src/app/__path__/__filePrefix__.tsx
index b1a695eda..a07a1f6de 100644
--- a/packages/cli/templates/react/igr-ts/rating/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/rating/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrRating } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/ripple/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/ripple/default/files/src/app/__path__/__filePrefix__.tsx
index 5cb65f865..c18c3afc8 100644
--- a/packages/cli/templates/react/igr-ts/ripple/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/ripple/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrButton, IgrRipple } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/slider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/slider/default/files/src/app/__path__/__filePrefix__.tsx
index 47cf24ba4..b0ef7bc75 100644
--- a/packages/cli/templates/react/igr-ts/slider/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/slider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrSlider } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/switch/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/switch/default/files/src/app/__path__/__filePrefix__.tsx
index 2c9336c32..95f768bdf 100644
--- a/packages/cli/templates/react/igr-ts/switch/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/switch/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrSwitch } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
index 24b92d986..e8d6d7dcc 100644
--- a/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrTabs, IgrTab, IgrTabPanel } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/text-area/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/text-area/default/files/src/app/__path__/__filePrefix__.tsx
index a388cce71..3b7fb68de 100644
--- a/packages/cli/templates/react/igr-ts/text-area/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/text-area/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrTextarea } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
diff --git a/packages/cli/templates/react/igr-ts/tree/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tree/default/files/src/app/__path__/__filePrefix__.tsx
index 6aeab81e0..0fb7dc736 100644
--- a/packages/cli/templates/react/igr-ts/tree/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/tree/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
import style from './style.module.css';
import { IgrTree, IgrTreeItem } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
return (
From 3aaed12a365ae13656bf1d3f4bde46a85b257937 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 14:11:19 +0000
Subject: [PATCH 08/10] fix: update tabs template to use correct React API
(IgrTab with label prop, no IgrTabPanel)
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/f6fbe834-0e2e-424b-b785-98268e09e176
Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
---
.../files/src/app/__path__/__filePrefix__.tsx | 19 +++++++++++++------
1 file changed, 13 insertions(+), 6 deletions(-)
diff --git a/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
index e8d6d7dcc..26841969d 100644
--- a/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,5 +1,5 @@
import style from './style.module.css';
-import { IgrTabs, IgrTab, IgrTabPanel } from 'igniteui-react';
+import { IgrTabs, IgrTab } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
@@ -8,11 +8,18 @@ export default function $(ClassName)() {
Tabs
- Albums Favourites Info Sgt. Peppers Lonely Hearts Club Band
The Dark Side of the Moon
Thriller
The Dark Side of the Moon
Led Zeppelin IV
+ Sgt. Peppers Lonely Hearts Club Band
+ The Dark Side of the Moon
+ Thriller
+
+
+ The Dark Side of the Moon
+ Led Zeppelin IV
+
+
+ No content available
+
From 4d3097c2e91b37c5ff96324d63f64a35212b1cce Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 31 Mar 2026 14:30:32 +0000
Subject: [PATCH 09/10] fix: address all unresolved review comments on React
igr-ts templates
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/2470cb9f-f7c6-4d85-8e9b-f5028c773415
Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
---
.../templates/react/igr-ts/accordion/default/index.ts | 2 +-
.../cli/templates/react/igr-ts/card/default/index.ts | 2 +-
.../react/igr-ts/circular-progress/default/index.ts | 2 +-
.../files/src/app/__path__/__filePrefix__.tsx | 5 +++--
.../templates/react/igr-ts/date-picker/default/index.ts | 2 +-
.../cli/templates/react/igr-ts/divider/default/index.ts | 4 ++--
packages/cli/templates/react/igr-ts/divider/index.ts | 2 +-
.../default/files/src/app/__path__/style.module.css | 9 +++++++++
.../react/igr-ts/expansion-panel/default/index.ts | 2 +-
.../react/igr-ts/linear-progress/default/index.ts | 2 +-
.../default/files/src/app/__path__/__filePrefix__.tsx | 2 +-
11 files changed, 22 insertions(+), 12 deletions(-)
create mode 100644 packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/style.module.css
diff --git a/packages/cli/templates/react/igr-ts/accordion/default/index.ts b/packages/cli/templates/react/igr-ts/accordion/default/index.ts
index 5e318da87..d87e3ac0c 100644
--- a/packages/cli/templates/react/igr-ts/accordion/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/accordion/default/index.ts
@@ -3,7 +3,7 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrAccordionTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
- this.components = ["IgrAccordion"];
+ this.components = ["Accordion"];
this.controlGroup = "Layouts";
this.listInComponentTemplates = true;
this.id = "accordion";
diff --git a/packages/cli/templates/react/igr-ts/card/default/index.ts b/packages/cli/templates/react/igr-ts/card/default/index.ts
index 2e8ca9aff..452f29ada 100644
--- a/packages/cli/templates/react/igr-ts/card/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/card/default/index.ts
@@ -3,7 +3,7 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrCardTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
- this.components = ["IgrCard"];
+ this.components = ["Card"];
this.controlGroup = "Layouts";
this.listInComponentTemplates = true;
this.id = "card";
diff --git a/packages/cli/templates/react/igr-ts/circular-progress/default/index.ts b/packages/cli/templates/react/igr-ts/circular-progress/default/index.ts
index 8c70781e0..50d105fc0 100644
--- a/packages/cli/templates/react/igr-ts/circular-progress/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/circular-progress/default/index.ts
@@ -3,7 +3,7 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrCircularProgressTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
-this.components = ["CircularProgress"];
+this.components = ["Circular Progress"];
this.controlGroup = "Data Entry & Display";
this.listInComponentTemplates = true;
this.id = "circular-progress";
diff --git a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
index a0f55b77c..67e833885 100644
--- a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
@@ -3,9 +3,10 @@ import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
- const handleSubmit = (event: React.FormEvent) => {
+ const handleSubmit = (event: SubmitEvent) => {
event.preventDefault();
- const formData = new FormData(event.currentTarget);
+ const form = event.target as HTMLFormElement;
+ const formData = new FormData(form);
const entries = Array.from(formData.entries());
const result = entries.map(([key, value]) => `${key}=${value}`).join('; ');
alert(result);
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/index.ts b/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
index cb38aec51..cbe37f48a 100644
--- a/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
@@ -3,7 +3,7 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrDatePickerTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
-this.components = ["DatePicker"];
+this.components = ["Date Picker"];
this.controlGroup = "Scheduling";
this.listInComponentTemplates = true;
this.id = "date-picker";
diff --git a/packages/cli/templates/react/igr-ts/divider/default/index.ts b/packages/cli/templates/react/igr-ts/divider/default/index.ts
index 9966f5723..0022a41e0 100644
--- a/packages/cli/templates/react/igr-ts/divider/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/divider/default/index.ts
@@ -3,8 +3,8 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrDividerTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
- this.components = ["IgrDivider"];
- this.controlGroup = "Layouts";
+ this.components = ["Divider"];
+ this.controlGroup = "Data Entry & Display";
this.listInComponentTemplates = true;
this.id = "divider";
this.projectType = "igr-ts";
diff --git a/packages/cli/templates/react/igr-ts/divider/index.ts b/packages/cli/templates/react/igr-ts/divider/index.ts
index 057233bdd..c7c155cac 100644
--- a/packages/cli/templates/react/igr-ts/divider/index.ts
+++ b/packages/cli/templates/react/igr-ts/divider/index.ts
@@ -4,7 +4,7 @@ class IgrDividerComponent extends BaseComponent {
constructor() {
super(__dirname);
this.name = "Divider";
- this.group = "Layouts";
+ this.group = "Data Entry & Display";
this.description = `provides a thin, lightweight separator.`;
}
}
diff --git a/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+ padding-top: 24px;
+ display: flex;
+ flex-flow: row;
+ justify-content: space-around;
+}
+:local(.title) {
+ color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/expansion-panel/default/index.ts b/packages/cli/templates/react/igr-ts/expansion-panel/default/index.ts
index 4e0e0a44d..126aedc30 100644
--- a/packages/cli/templates/react/igr-ts/expansion-panel/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/expansion-panel/default/index.ts
@@ -3,7 +3,7 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrExpansionPanelTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
- this.components = ["IgrExpansionPanel"];
+ this.components = ["Expansion Panel"];
this.controlGroup = "Layouts";
this.listInComponentTemplates = true;
this.id = "expansion-panel";
diff --git a/packages/cli/templates/react/igr-ts/linear-progress/default/index.ts b/packages/cli/templates/react/igr-ts/linear-progress/default/index.ts
index d5961ea21..4b0982d33 100644
--- a/packages/cli/templates/react/igr-ts/linear-progress/default/index.ts
+++ b/packages/cli/templates/react/igr-ts/linear-progress/default/index.ts
@@ -3,7 +3,7 @@ import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIF
class IgrLinearProgressTemplate extends IgniteUIForReactTemplate {
constructor() {
super(__dirname);
-this.components = ["LinearProgress"];
+this.components = ["Linear Progress"];
this.controlGroup = "Data Entry & Display";
this.listInComponentTemplates = true;
this.id = "linear-progress";
diff --git a/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
index d9ab008cc..69b37c934 100644
--- a/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,5 +1,5 @@
import style from './style.module.css';
-import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton } from 'igniteui-react';
+import { IgrList, IgrListItem, IgrListHeader, IgrAvatar } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
From 33a06306d3258eb9766c848e5235133bfbb4e902 Mon Sep 17 00:00:00 2001
From: Damyan Petev
Date: Tue, 31 Mar 2026 17:46:28 +0300
Subject: [PATCH 10/10] Apply suggestion from @damyanpetev
---
.../subscription-form/files/src/app/__path__/__filePrefix__.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
index 67e833885..45ccaf756 100644
--- a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
+++ b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
@@ -3,7 +3,7 @@ import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
export default function $(ClassName)() {
- const handleSubmit = (event: SubmitEvent) => {
+ const handleSubmit = (event: React.SubmitEvent) => {
event.preventDefault();
const form = event.target as HTMLFormElement;
const formData = new FormData(form);