chore: address PR comments

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

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

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

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

@@ -9,4 +9,4 @@
 }
 :local(.graph) {
     width: 50%;
-}
+}

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

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

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

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

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

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

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

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

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."
-}
+}

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

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

@@ -9,4 +9,4 @@
 }
 :local(.gauge) {
     width: 50%;
-}
+}

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

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

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
 

packages/cli/templates/react/igr-ts/projects/_base/files/src/app/App.tsx

@@ -9,4 +9,4 @@ export default function App() {
 			</div>
 		</div>
 	)
-}
+}

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
+global.ResizeObserver = ResizeObserver

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

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

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

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

@@ -9,4 +9,4 @@
 }
 :local(.gauge) {
     width: 50%;
-}
+}