feat(igr-ts): add missing component templates to match (igc-ts) selection

packages/cli/templates/react/igr-ts/accordion/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();
+});

packages/cli/templates/react/igr-ts/accordion/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Accordion</h1>
+      <div className={style.container}>
+        <IgrAccordion singleExpand={false}>
+          <IgrExpansionPanel>
+            <div slot="title">Ignite UI for React</div>
+            <p>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.</p>
+          </IgrExpansionPanel>
+          <IgrExpansionPanel>
+            <div slot="title">Ignite UI for Angular</div>
+            <p>Ignite UI for Angular is a complete set of Material-based UI Widgets, Components and Sketch UI kits by Infragistics.</p>
+          </IgrExpansionPanel>
+          <IgrExpansionPanel>
+            <div slot="title">Ignite UI for Web Components</div>
+            <p>Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications.</p>
+          </IgrExpansionPanel>
+        </IgrAccordion>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/accordion/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);
+}

packages/cli/templates/react/igr-ts/accordion/default/index.ts

@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrAccordionTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["IgrAccordion"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "accordion";
+		this.projectType = "igr-ts";
+		this.name = "Accordion";
+		this.description = "basic IgrAccordion";
+		this.packages = ["igniteui-react@~19.5.2"];
+	}
+}
+module.exports = new IgrAccordionTemplate();

packages/cli/templates/react/igr-ts/accordion/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrAccordionComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name  = "Accordion";
+		this.group = "Layouts";
+		this.description = `enables displaying of content in a vertically collapsible fashion.`;
+	}
+}
+module.exports = new IgrAccordionComponent();

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();
+});

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-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Avatar</h1>
+      <div className={style.container}>
+        <IgrAvatar shape="circle" size="large" initials="JD" />
+        <IgrAvatar shape="rounded" size="medium" initials="AB" />
+        <IgrAvatar shape="circle" size="small" initials="CD" />
+      </div>
+    </div>
+  );
+}

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);
+}

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();

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();

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();
+});

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-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Badge</h1>
+      <div className={style.container}>
+        <IgrBadge outlined={true}>Awaiting test</IgrBadge>
+        <IgrBadge outlined={true} variant="danger">Critical issue</IgrBadge>
+        <IgrBadge outlined={true} variant="success">Verified</IgrBadge>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/badge/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);
+}

packages/cli/templates/react/igr-ts/badge/default/index.ts

@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrBadgeTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Badge"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "badge";
+		this.projectType = "igr-ts";
+		this.name = "Badge";
+		this.description = "displays a badge with customizable variants and styles.";
+		this.packages = ["igniteui-react@~19.5.2"];
+	}
+}
+module.exports = new IgrBadgeTemplate();

packages/cli/templates/react/igr-ts/badge/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrBadgeComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name  = "Badge";
+		this.group = "Data Entry & Display";
+		this.description = `displays a badge with customizable variants and styles.`;
+	}
+}
+module.exports = new IgrBadgeComponent();

packages/cli/templates/react/igr-ts/banner/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();
+});

packages/cli/templates/react/igr-ts/banner/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,16 @@
+import style from './style.module.css';
+import { IgrBanner } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Banner</h1>
+      <div className={style.container}>
+        <IgrBanner open={true}>
+          You are currently not logged in! Please, log into your account first.
+        </IgrBanner>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/banner/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);
+}

packages/cli/templates/react/igr-ts/banner/default/index.ts

@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrBannerTemplate extends IgniteUIForReactTemplate {
+constructor() {
+super(__dirname);
+this.components = ["Banner"];
+this.controlGroup = "Notifications";
+this.listInComponentTemplates = true;
+this.id = "banner";
+this.projectType = "igr-ts";
+this.name = "Banner";
+this.description = "basic IgrBanner";
+this.packages = ["igniteui-react@~19.5.2"];
+}
+}
+module.exports = new IgrBannerTemplate();

packages/cli/templates/react/igr-ts/banner/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrBannerComponent extends BaseComponent {
+constructor() {
+super(__dirname);
+this.name  = "Banner";
+this.group = "Notifications";
+this.description = `displays banner component`;
+}
+}
+module.exports = new IgrBannerComponent();

packages/cli/templates/react/igr-ts/button-group/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();
+});

packages/cli/templates/react/igr-ts/button-group/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,18 @@
+import style from './style.module.css';
+import { IgrButtonGroup, IgrToggleButton } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Button Group</h1>
+      <div className={style.container}>
+        <IgrButtonGroup>
+          <IgrToggleButton value="left"><span>Left</span></IgrToggleButton>
+          <IgrToggleButton value="center"><span>Center</span></IgrToggleButton>
+          <IgrToggleButton value="right"><span>Right</span></IgrToggleButton>
+        </IgrButtonGroup>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/button-group/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);
+}

packages/cli/templates/react/igr-ts/button-group/default/index.ts

@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrButtonGroupTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Button group"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "button-group";
+		this.projectType = "igr-ts";
+		this.name = "Button group";
+		this.description = "basic IgrButtonGroup";
+		this.packages = ["igniteui-react@~19.5.2"];
+	}
+}
+module.exports = new IgrButtonGroupTemplate();

packages/cli/templates/react/igr-ts/button-group/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrButtonGroupComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name  = "Button group";
+		this.group = "Data Entry & Display";
+		this.description = `displays a group of buttons with toggle functionality.`;
+	}
+}
+module.exports = new IgrButtonGroupComponent();

packages/cli/templates/react/igr-ts/button/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();
+});

packages/cli/templates/react/igr-ts/button/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrButton } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Button</h1>
+      <div className={style.container}>
+        <IgrButton size="large"><span>Large button</span></IgrButton>
+      </div>
+    </div>
+  );
+}