feat: add missing igr-ts templates

packages/cli/templates/react/igr-ts/carousel/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/carousel/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrCarousel, IgrCarouselSlide } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Carousel</h1>
+      <div className={style.container}>
+        <IgrCarousel>
+          <IgrCarouselSlide active={true}>
+            <h2>London</h2>
+            <p>The capital of the United Kingdom, known for its history and landmarks.</p>
+          </IgrCarouselSlide>
+          <IgrCarouselSlide>
+            <h2>Paris</h2>
+            <p>The capital of France, famous for the Eiffel Tower and its museums.</p>
+          </IgrCarouselSlide>
+          <IgrCarouselSlide>
+            <h2>Tokyo</h2>
+            <p>The capital of Japan, a bustling metropolis blending tradition and technology.</p>
+          </IgrCarouselSlide>
+        </IgrCarousel>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/carousel/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/carousel/default/index.ts

@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrCarouselTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Carousel"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "carousel";
+		this.projectType = "igr-ts";
+		this.name = "Carousel";
+		this.description = "basic IgrCarousel";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrCarouselTemplate();

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

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrCarouselComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Carousel";
+		this.group = "Layouts";
+		this.description = `presents a set of slides by sequentially displaying one at a time`;
+	}
+}
+module.exports = new IgrCarouselComponent();

packages/cli/templates/react/igr-ts/chat/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/chat/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,20 @@
+import style from './style.module.css';
+import { IgrChat } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const messages = [
+  { id: '1', text: 'Hi! How can I help you today?', sender: 'assistant', timestamp: new Date().toISOString() },
+  { id: '2', text: 'Can you show me the Ignite UI for React chat component?', sender: 'user', timestamp: new Date().toISOString() },
+  { id: '3', text: 'Absolutely — this is it!', sender: 'assistant', timestamp: new Date().toISOString() },
+];
+
+export default function $(ClassName)() {
+  return (
+    <div className={style.page}>
+      <h1 className={style.title}>Chat</h1>
+      <div className={style.container}>
+        <IgrChat messages={messages} options={{ currentUserId: 'user' }} />
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/style.module.css

@@ -0,0 +1,21 @@
+:local(.page) {
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px 40px;
+  box-sizing: border-box;
+}
+:local(.container) {
+  width: 100%;
+}
+:local(.container) :global(igc-chat) {
+  display: block;
+  width: min(100%, 720px);
+  height: 560px;
+  margin: 0 auto;
+}
+:local(.title) {
+  margin: 0 0 20px;
+  color: rgb(0, 153, 255);
+}

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

@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrChatTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Chat"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "chat";
+		this.projectType = "igr-ts";
+		this.name = "Chat";
+		this.description = "basic IgrChat";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrChatTemplate();

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

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrChatComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Chat";
+		this.group = "Data Entry & Display";
+		this.description = `a chat UI component for displaying messages, attachments and input interaction`;
+	}
+}
+module.exports = new IgrChatComponent();

packages/cli/templates/react/igr-ts/combo/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/combo/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,30 @@
+import style from './style.module.css';
+import { IgrCombo } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const cities = [
+  { id: 'london', name: 'London', country: 'United Kingdom' },
+  { id: 'paris', name: 'Paris', country: 'France' },
+  { id: 'new-york', name: 'New York', country: 'United States' },
+  { id: 'toronto', name: 'Toronto', country: 'Canada' },
+  { id: 'tokyo', name: 'Tokyo', country: 'Japan' },
+  { id: 'sydney', name: 'Sydney', country: 'Australia' },
+];
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Combo</h1>
+      <div className={style.container}>
+        <IgrCombo
+          label="Favorite cities"
+          placeholder="Select cities"
+          data={cities}
+          valueKey="id"
+          displayKey="name"
+          groupKey="country"
+        />
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/combo/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/combo/default/index.ts

@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrComboTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Combo"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "combo";
+		this.projectType = "igr-ts";
+		this.name = "Combo";
+		this.description = "basic IgrCombo";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrComboTemplate();

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

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrComboComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Combo";
+		this.group = "Data Entry & Display";
+		this.description = `a searchable, multi-select dropdown bound to a data source`;
+	}
+}
+module.exports = new IgrComboComponent();

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

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

@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrDateRangePicker } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Date Range Picker</h1>
+      <div className={style.container}>
+        <IgrDateRangePicker label="Choose a date range" />
+      </div>
+    </div>
+  );
+}

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

packages/cli/templates/react/igr-ts/date-range-picker/default/index.ts

@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrDateRangePickerTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Date Range Picker"];
+		this.controlGroup = "Scheduling";
+		this.listInComponentTemplates = true;
+		this.id = "date-range-picker";
+		this.projectType = "igr-ts";
+		this.name = "Date Range Picker";
+		this.description = "basic IgrDateRangePicker";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrDateRangePickerTemplate();

packages/cli/templates/react/igr-ts/date-range-picker/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDateRangePickerComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Date Range Picker";
+		this.group = "Scheduling";
+		this.description = `an input that allows the user to select a range of dates`;
+	}
+}
+module.exports = new IgrDateRangePickerComponent();

packages/cli/templates/react/igr-ts/date-time-input/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/date-time-input/default/files/src/app/__path__/__filePrefix__.tsx

@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrDateTimeInput } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Date Time Input</h1>
+      <div className={style.container}>
+        <IgrDateTimeInput label="Appointment date" inputFormat="MM/dd/yyyy" value={new Date(2026, 0, 15)} />
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/date-time-input/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/date-time-input/default/index.ts

@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrDateTimeInputTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Date Time Input"];
+		this.controlGroup = "Scheduling";
+		this.listInComponentTemplates = true;
+		this.id = "date-time-input";
+		this.projectType = "igr-ts";
+		this.name = "Date Time Input";
+		this.description = "basic IgrDateTimeInput";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrDateTimeInputTemplate();

packages/cli/templates/react/igr-ts/date-time-input/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDateTimeInputComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Date Time Input";
+		this.group = "Scheduling";
+		this.description = `an input field for editing date and time values with a customizable format`;
+	}
+}
+module.exports = new IgrDateTimeInputComponent();