From dc0a1944e006663b768a8e27a118d478188292eb Mon Sep 17 00:00:00 2001
From: onlyexeption <ibarakov@infragistics.com>
Date: Thu, 7 Dec 2023 14:20:56 +0200
Subject: [PATCH] chore: address PR comments

---
 packages/cli/lib/commands/new.ts              |   6 +-
 .../lib/templates/IgniteUIForReactTemplate.ts |   6 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../cli/templates/react/igr-ts/groups.json    |   2 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 .../igr-ts/projects/_base/files/README.md     |   2 +-
 .../projects/_base/files/src/app/App.tsx      |   2 +-
 .../projects/_base/files/src/setupTests.ts    |   2 +-
 .../files/src/app/home/home.tsx               |  17 +--
 .../projects/top-nav/files/src/app/App.css    | 119 +++++++++---------
 .../src/app/__path__/__filePrefix__.test.tsx  |   2 +-
 .../files/src/app/__path__/style.module.css   |   2 +-
 24 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/packages/cli/lib/commands/new.ts b/packages/cli/lib/commands/new.ts
index 5049fa929..7c0359fdd 100644
--- a/packages/cli/lib/commands/new.ts
+++ b/packages/cli/lib/commands/new.ts
@@ -109,9 +109,9 @@ command = {
 
 		const theme = projectLib.themes[themeIndex];
 
-		const indexOfEmptyOrFirst = projectLib.projectIds.indexOf("empty") !== -1 ?
-			projectLib.projectIds.indexOf("empty") :
-			0;
+		const indexOfEmptyOrFirst = projectLib.projectIds.indexOf("empty") !== -1
+			? projectLib.projectIds.indexOf("empty")
+			: 0;
 
 		const projectTemplate = argv.template || projectLib.projectIds[indexOfEmptyOrFirst];
 		Util.log(`Project Name: ${argv.name}, framework ${argv.framework}, type ${projectLib.projectType}, theme ${theme}`);
diff --git a/packages/cli/lib/templates/IgniteUIForReactTemplate.ts b/packages/cli/lib/templates/IgniteUIForReactTemplate.ts
index 3c5843e2b..8491a2789 100644
--- a/packages/cli/lib/templates/IgniteUIForReactTemplate.ts
+++ b/packages/cli/lib/templates/IgniteUIForReactTemplate.ts
@@ -66,13 +66,13 @@ export class IgniteUIForReactTemplate implements Template {
 		}
 
 		const routeModulePath: string = options.parentRoutingModulePath;
-		const routingModule = new ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
 
-		if (!(options && options.skipRoute) && App.container.get<IFileSystem>(FS_TOKEN)
-			.fileExists(routeModulePath)) {
+		if (!(options && options.skipRoute)
+			&& App.container.get<IFileSystem>(FS_TOKEN).fileExists(routeModulePath)) {
 			let nameFromPath = Util.nameFromPath(name);
 			let lowerDashed = Util.lowerDashed(nameFromPath);
 			let filePath = path.posix.join(projectPath, options.modulePath, `${lowerDashed}.tsx`);
+			const routingModule = new ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
 
 			if (defaultPath) {
 				routingModule.addRoute("", options.className, nameFromPath, filePath, options.routerChildren, undefined);
diff --git a/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/style.module.css
index 1040e7ad7..b79b2ac27 100644
--- a/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/style.module.css
@@ -9,4 +9,4 @@
 }
 :local(.graph) {
     width: 50%;
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/style.module.css
index b8c09ee23..d5f4be4a6 100644
--- a/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/category-chart/default/files/src/app/__path__/style.module.css
@@ -6,4 +6,4 @@
 }
 :local(.title) {
     color: rgb(0, 153, 255);
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/style.module.css
index bd4482f69..9bc1c8132 100644
--- a/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/style.module.css
@@ -6,4 +6,4 @@
 }
 :local(.title) {
     color: rgb(0, 153, 255);
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/style.module.css
index 9aaa77850..2556f96e9 100644
--- a/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/style.module.css
@@ -7,4 +7,4 @@
 }
 :local(.title) {
     color: rgb(0, 153, 255);
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css
index bb0a0030d..4ed0c6a7b 100644
--- a/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css
@@ -14,4 +14,4 @@
 	width: 80%;
 	margin-bottom: 24px;
 	border: 1px solid rgb(0, 153, 255);
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/groups.json b/packages/cli/templates/react/igr-ts/groups.json
index 4d9ba21df..579789370 100644
--- a/packages/cli/templates/react/igr-ts/groups.json
+++ b/packages/cli/templates/react/igr-ts/groups.json
@@ -2,4 +2,4 @@
 	"Gauges": "scale measure Controls including Linear and Radial Gauge and Bullet Graph.",
 	"Charts": "high-performance data visualization for category and financial data.",
 	"Grids & Lists": "bind and display data sets with little coding or configuration."
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/style.module.css
index 31590f1ec..8c4e121fe 100644
--- a/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/linear-gauge/default/files/src/app/__path__/style.module.css
@@ -9,4 +9,4 @@
 }
 :local(.gauge) {
     width: 50%;
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/style.module.css
index bd4482f69..9bc1c8132 100644
--- a/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/pie-chart/default/files/src/app/__path__/style.module.css
@@ -6,4 +6,4 @@
 }
 :local(.title) {
     color: rgb(0, 153, 255);
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/README.md b/packages/cli/templates/react/igr-ts/projects/_base/files/README.md
index dbf5fb8d1..d323aea07 100644
--- a/packages/cli/templates/react/igr-ts/projects/_base/files/README.md
+++ b/packages/cli/templates/react/igr-ts/projects/_base/files/README.md
@@ -14,7 +14,7 @@ Run `ig build` to build the application into an output directory.
 
 ## Step by step mode
 
-If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you to create and setup your new application, as well as update project previously created with the Ignite UI CLI. To start the guide, simply run the `ig` command.
+If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you to create and setup your new application, as well as update a project previously created with the Ignite UI CLI. To start the guide, simply run the `ig` command.
 
 ## List templates
 
diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/src/app/App.tsx b/packages/cli/templates/react/igr-ts/projects/_base/files/src/app/App.tsx
index cc581fd47..4514300d8 100644
--- a/packages/cli/templates/react/igr-ts/projects/_base/files/src/app/App.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/_base/files/src/app/App.tsx
@@ -9,4 +9,4 @@ export default function App() {
 			</div>
 		</div>
 	)
-}
\ No newline at end of file
+}
diff --git a/packages/cli/templates/react/igr-ts/projects/_base/files/src/setupTests.ts b/packages/cli/templates/react/igr-ts/projects/_base/files/src/setupTests.ts
index 698aeae9f..e17fdbb2e 100644
--- a/packages/cli/templates/react/igr-ts/projects/_base/files/src/setupTests.ts
+++ b/packages/cli/templates/react/igr-ts/projects/_base/files/src/setupTests.ts
@@ -2,4 +2,4 @@ import '@testing-library/jest-dom'
 import 'vitest-canvas-mock'
 import ResizeObserver from 'resize-observer-polyfill'
 
-global.ResizeObserver = ResizeObserver
\ No newline at end of file
+global.ResizeObserver = ResizeObserver
diff --git a/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx b/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx
index c9b6620f5..5c63f5190 100644
--- a/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx
+++ b/packages/cli/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx
@@ -1,21 +1,24 @@
-import logo from '/logo.svg';
-import styles from './style.module.css';
+import logo from "/logo.svg";
+import styles from "./style.module.css";
 
 export default function App() {
   const name = "$(name)";
-	return (
+
+  return (
     <div className="app">
-			<div className={styles.app__name}>{name}</div>
+      <div className={styles.app__name}>{name}</div>
       <header className={styles.header}>
         <img src={logo} className={styles.logo} alt="logo" />
         <p>Welcome to Ignite UI for React!</p>
-        <a className={styles.link}
+        <a
+          className={styles.link}
           href="https://www.infragistics.com/products/ignite-ui-react"
           target="_blank"
-          rel="noopener noreferrer">
+          rel="noopener noreferrer"
+        >
           Learn More
         </a>
       </header>
     </div>
-	)
+  );
 }
diff --git a/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/app/App.css b/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/app/App.css
index fd9528478..41a9dc40f 100644
--- a/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/app/App.css
+++ b/packages/cli/templates/react/igr-ts/projects/top-nav/files/src/app/App.css
@@ -1,59 +1,62 @@
 .app {
-	text-align: center;
-	display: flex;
-	flex-flow: column;
-	min-height: 100vh;
-  }
-  
-  .content {
-	flex: 1 0 auto;
-	padding: 1em;
-  }
-  
-  /* quick nav menubar */
-  nav, .app__name {
-	background-color: rgb(0, 153, 255);
-	box-sizing: border-box;
-  }
-  .app__name {
-	font-weight: 600;
-	font-size: 24px;
-	line-height: 32px;
-	padding-left: 24px;
-	text-align: left;
-	color: #FFF;
-	padding-bottom: 8px;
-  }
-  
-  nav ul {
-	list-style: none;
-	display: flex;
-	justify-content: flex-start;
-	flex-wrap: wrap;
-	margin: 0;
-	padding: 0;
-  }
-  
-  nav ul a {
-	color: #fff;
-	line-height: 2;
-	text-decoration: none;
-	margin: 0 5px;
-  }
-  
-  nav ul a.active {
-	color: #fff;
-	font-weight: 600;
-  }
-  nav ul li {
-	margin: 0px 16px;
-	box-sizing: border-box;
-	border-bottom: 1px solid transparent;
-  }
-  nav ul li.active {
-	border-bottom: 2px solid #fff;
-  }
-  nav ul li:not(.active):hover {
-	border-bottom: 1px solid #fff;
-  }
-  
\ No newline at end of file
+  text-align: center;
+  display: flex;
+  flex-flow: column;
+  min-height: 100vh;
+}
+
+.content {
+  flex: 1 0 auto;
+  padding: 1em;
+}
+
+/* quick nav menubar */
+nav,
+.app__name {
+  background-color: rgb(0, 153, 255);
+  box-sizing: border-box;
+}
+.app__name {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  padding-left: 24px;
+  text-align: left;
+  color: #fff;
+  padding-bottom: 8px;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+
+nav ul a {
+  color: #fff;
+  line-height: 2;
+  text-decoration: none;
+  margin: 0 5px;
+}
+
+nav ul a.active {
+  color: #fff;
+  font-weight: 600;
+}
+
+nav ul li {
+  margin: 0px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid transparent;
+}
+
+nav ul li.active {
+  border-bottom: 2px solid #fff;
+}
+
+nav ul li:not(.active):hover {
+  border-bottom: 1px solid #fff;
+}
diff --git a/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx
index 0dedf55d9..d8d91aeb3 100644
--- a/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx
+++ b/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -5,4 +5,4 @@ import $(ClassName) from './index';
 test('renders $(ClassName) component', () => {
     const wrapper = render(<$(ClassName) />);
     expect(wrapper).toBeTruthy();
-});
\ No newline at end of file
+});
diff --git a/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/style.module.css
index 8ccb6dae7..215c1ac12 100644
--- a/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/style.module.css
+++ b/packages/cli/templates/react/igr-ts/radial-gauge/default/files/src/app/__path__/style.module.css
@@ -9,4 +9,4 @@
 }
 :local(.gauge) {
     width: 50%;
-}
\ No newline at end of file
+}