fix(cli): add grid components types selection for project creation

packages/cli/lib/templates/IgniteUIForWebComponentsTemplate.ts

@@ -52,7 +52,8 @@ export class IgniteUIForWebComponentsTemplate implements Template {
 			!(options && options.skipRoute) &&
 			App.container.get<IFileSystem>(FS_TOKEN).fileExists(routeModulePath)
 		) {
-			const modulePath = `./${Util.lowerDashed(fullName)}/${Util.lowerDashed(fullName)}-routing`
+			const modulePath = `./${Util.lowerDashed(fullName)}/${Util.lowerDashed(fullName)}-routing`;
+			const componentTag = `app-${this.fileName(fullName)}`;
 			const child: RouteLike = {
 				identifierName: ROUTES_VARIABLE_NAME,
 				aliasName: options.routerChildren,
@@ -61,7 +62,7 @@ export class IgniteUIForWebComponentsTemplate implements Template {
 			if (defaultPath) {
 				routingModule.addRoute({
 						path: "",
-						redirectTo: options.selector,
+						redirectTo: componentTag,
 						name: Util.nameFromPath(fullName)
 					}
 				);
@@ -72,7 +73,7 @@ export class IgniteUIForWebComponentsTemplate implements Template {
 
 			routingModule.addRoute({
 					path: this.fileName(fullName),
-					identifierName: options.selector,
+					identifierName: componentTag,
 					name: Util.nameFromPath(fullName)
 				},
 				false // multiline

packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.tsx

@@ -2,50 +2,59 @@ import style from './style.module.css';
 import { IgrGrid, IgrColumn } from 'igniteui-react-grids';
 import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
 
-import data from './data';
+import { employeesData } from './data';
 
 export default function $(ClassName)() {
-  const title = 'Grid';
+  const title = '$(name)';
 
   return (
-    <div>
-      <h1 className={style.title}>{title}</h1>
-      <div>
-        Read more on the&nbsp;
-        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid.html">
-          official documentation page
-        </a>
-      </div>
-      <div className={style.container}>
-        <div className={style.grid}>
-          <IgrGrid data={data}>
-            <IgrColumn
-              field="ProductID"
-              header="Product ID"
-              dataType="number">
-            </IgrColumn>
-            <IgrColumn
-              field="ProductName"
-              header="Product Name"
-              dataType="string">
-            </IgrColumn>
-            <IgrColumn
-              field="QuantityPerUnit"
-              header="Quantity Per Unit"
-              dataType="string">
-            </IgrColumn>
-            <IgrColumn
-              field="UnitsInStock"
-              header="Units In Stock"
-              dataType="number">
-            </IgrColumn>
-            <IgrColumn
-              field="OrderDate"
-              header="Order Date"
-              dataType="date">
-            </IgrColumn>
-          </IgrGrid>
-        </div>
+    <div className={style.page}>
+      <p className={style.title}>{title}</p>
+      <p className={style.subtitle}>
+        IgrGrid component with auto generated columns and local data.<br />
+        You can read more about configuring the IgrGrid component in the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids/data-grid.html" target="_blank" rel="noopener noreferrer">
+          official documentation
+        </a>.
+      </p>
+      <div className={style.grid}>
+        <IgrGrid data={employeesData} height="600px" width="100%">
+          <IgrColumn
+            field="EmployeeID"
+            header="Employee ID"
+            dataType="string">
+          </IgrColumn>
+          <IgrColumn
+            field="FirstName"
+            header="First Name"
+            dataType="string">
+          </IgrColumn>
+          <IgrColumn
+            field="LastName"
+            header="Last Name"
+            dataType="string">
+          </IgrColumn>
+          <IgrColumn
+            field="Country"
+            header="Country"
+            dataType="string">
+          </IgrColumn>
+          <IgrColumn
+            field="Age"
+            header="Age"
+            dataType="number">
+          </IgrColumn>
+          <IgrColumn
+            field="RegistererDate"
+            header="Registered Date"
+            dataType="date">
+          </IgrColumn>
+          <IgrColumn
+            field="IsActive"
+            header="Active"
+            dataType="boolean">
+          </IgrColumn>
+        </IgrGrid>
       </div>
     </div>
   );

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

@@ -1,17 +1,27 @@
-:local(.container) {
-  padding-top: 24px;
+:local(.page) {
+  width: 100%;
+  margin-top: 40px;
+  padding: 0 48px;
   display: flex;
-  flex-flow: column;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
 }
 
 :local(.title) {
   color: rgb(0, 153, 255);
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 600;
+}
+
+:local(.subtitle) {
+  text-align: center;
+  margin-bottom: 32px;
+  margin-top: 16px;
+  font-size: 14px;
 }
 
 :local(.grid) {
-  width: 80%;
-  margin-bottom: 24px;
-  border: 1px solid rgb(0, 153, 255);
+  width: 100%;
+  max-width: 1200px;
 }

packages/cli/templates/react/igr-ts/grid/basic/index.ts

@@ -1,23 +1,33 @@
 
 import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
 import { IGNITEUI_REACT_GRIDS_PACKAGE } from "../../constants";
+import * as path from "path";
+
+const SHARED_DATA_ROOT = path.join(path.dirname(require.resolve("@igniteui/angular-templates/package.json")), "shared-data");
 
 class GridTemplate extends IgniteUIForReactTemplate {
-	/**
-	 *
-	 */
-	constructor() {
-		super(__dirname);
-		this.id = "grid";
-		this.name = "Grid";
-		this.widget = "igGrid";
-		this.description = "IgrGrid template for React";
-		this.projectType = "igr-ts";
-		this.components = ["Grid"];
-		this.controlGroup = "Data Grids";
-		this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE];
+        /**
+         *
+         */
+        constructor() {
+                super(__dirname);
+                this.id = "grid";
+                this.name = "Grid";
+                this.widget = "igGrid";
+                this.description = "IgrGrid template for React";
+                this.projectType = "igr-ts";
+                this.components = ["Grid"];
+                this.controlGroup = "Data Grids";
+                this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE];
+
+                this.hasExtraConfiguration = false;
+        }
 
-		this.hasExtraConfiguration = false;
-	}
+        public get templatePaths(): string[] {
+                return [
+                        ...super.templatePaths,
+                        path.join(SHARED_DATA_ROOT, "grid", "files")
+                ];
+        }
 }
 module.exports = new GridTemplate();

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

@@ -0,0 +1,43 @@
+import style from './style.module.css';
+import { IgrHierarchicalGrid, IgrRowIsland, IgrColumn } from 'igniteui-react-grids';
+import 'igniteui-react-grids/grids/themes/light/bootstrap.css';
+
+import { ARTISTS } from './data';
+
+export default function $(ClassName)() {
+  const title = '$(name)';
+
+  return (
+    <div className={style.page}>
+      <p className={style.title}>{title}</p>
+      <p className={style.subtitle}>
+        IgrHierarchicalGrid with basic configuration.<br />
+        You can read more about configuring the IgrHierarchicalGrid component in the&nbsp;
+        <a href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/overview.html" target="_blank" rel="noopener noreferrer">
+          official documentation
+        </a>.
+      </p>
+      <div className={style.grid}>
+        <IgrHierarchicalGrid data={ARTISTS} primaryKey="Artist" autoGenerate={false} height="600px" width="100%">
+          <IgrColumn field="Artist" dataType="string" />
+          <IgrColumn field="HasGrammyAward" header="Has Grammy Award" dataType="boolean" />
+          <IgrColumn field="Debut" dataType="number" />
+          <IgrColumn field="GrammyNominations" header="Grammy Nominations" dataType="number" />
+          <IgrColumn field="GrammyAwards" header="Grammy Awards" dataType="number" />
+          <IgrRowIsland childDataKey="Albums" primaryKey="Album" autoGenerate={false}>
+            <IgrColumn field="Album" dataType="string" />
+            <IgrColumn field="LaunchDate" header="Launch Date" dataType="date" />
+            <IgrColumn field="BillboardReview" header="Billboard Review" dataType="number" />
+            <IgrColumn field="USBillboard200" header="US Billboard 200" dataType="number" />
+            <IgrRowIsland childDataKey="Songs" primaryKey="TrackNumber" autoGenerate={false}>
+              <IgrColumn field="TrackNumber" header="Track" dataType="string" />
+              <IgrColumn field="Title" dataType="string" />
+              <IgrColumn field="Released" dataType="string" />
+              <IgrColumn field="Genre" dataType="string" />
+            </IgrRowIsland>
+          </IgrRowIsland>
+        </IgrHierarchicalGrid>
+      </div>
+    </div>
+  );
+}

packages/cli/templates/react/igr-ts/hierarchical-grid/basic/files/src/app/__path__/style.module.css

@@ -0,0 +1,27 @@
+:local(.page) {
+  width: 100%;
+  margin-top: 40px;
+  padding: 0 48px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+:local(.title) {
+  color: rgb(0, 153, 255);
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 600;
+}
+
+:local(.subtitle) {
+  text-align: center;
+  margin-bottom: 32px;
+  margin-top: 16px;
+  font-size: 14px;
+}
+
+:local(.grid) {
+  width: 100%;
+  max-width: 1200px;
+}

packages/cli/templates/react/igr-ts/hierarchical-grid/basic/index.ts

@@ -0,0 +1,28 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_GRIDS_PACKAGE } from "../../constants";
+import * as path from "path";
+
+const SHARED_DATA_ROOT = path.join(path.dirname(require.resolve("@igniteui/angular-templates/package.json")), "shared-data");
+
+class HierarchicalGridTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.id = "hierarchical-grid";
+		this.name = "Hierarchical Grid";
+		this.widget = "igHierarchicalGrid";
+		this.description = "IgrHierarchicalGrid template for React";
+		this.projectType = "igr-ts";
+		this.components = ["Hierarchical Grid"];
+		this.controlGroup = "Data Grids";
+		this.packages = [IGNITEUI_REACT_GRIDS_PACKAGE];
+		this.hasExtraConfiguration = false;
+	}
+
+	public get templatePaths(): string[] {
+		return [
+			...super.templatePaths,
+			path.join(SHARED_DATA_ROOT, "hierarchical-grid", "files")
+		];
+	}
+}
+module.exports = new HierarchicalGridTemplate();

packages/cli/templates/react/igr-ts/hierarchical-grid/index.ts

@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrTsHierarchicalGridComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Hierarchical Grid";
+		this.group = "Grids & Lists";
+		this.description = "IgrHierarchicalGrid component for React";
+	}
+}
+module.exports = new IgrTsHierarchicalGridComponent();

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