igniteui-cli 13.1.11 → 13.1.12-beta.2

package/lib/commands/upgrade.js

@@ -42,11 +42,10 @@ command = {
                 case "jquery":
                     cli_core_1.Util.log("Upgrading packages for jQuery projects is currently not supported!");
                     return;
-                case "react":
-                    cli_core_1.Util.log("Upgrading packages for React projects is currently not supported!");
-                    return;
                 case "angular":
-                    if (projectType === "igx-ts") {
+                case "react":
+                case "webcomponents":
+                    if (projectType === "igx-ts" || projectType === "igr-ts" || projectType === "igc-ts") {
                         const projectLibrary = command.templateManager.getProjectLibrary(framework, projectType);
                         let project;
                         if (!config.project.projectTemplate || !projectLibrary.hasProject(config.project.projectTemplate)) {
@@ -69,7 +68,7 @@ command = {
                             }
                         }
                     }
-                    else {
+                    else if (framework.toLowerCase() === "angular") {
                         cli_core_1.Util.log("Upgrading packages for Angular Wrappers projects is currently not supported!");
                         return;
                     }

package/lib/templates/IgniteUIForReactTemplate.js

@@ -58,7 +58,7 @@ class IgniteUIForReactTemplate {
             let filePath = path.posix.join(projectPath, options.modulePath, `${lowerDashed}.tsx`);
             const routingModule = new ReactTypeScriptFileUpdate_1.ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
             if (defaultPath) {
-                routingModule.addRoute("", options.className, nameFromPath, filePath, options.routerChildren, undefined);
+                routingModule.addRoute(lowerDashed, options.className, nameFromPath, filePath, options.routerChildren, undefined, defaultPath);
             }
             routingModule.addRoute(lowerDashed, options.className, nameFromPath, filePath, options.routerChildren, undefined);
             if (options.hasChildren) {

package/lib/templates/IgniteUIForWebComponentsTemplate.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IgniteUIForWebComponentsTemplate = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
 const path = require("path");
-const package_resolve_1 = require("../../templates/webcomponents/package-resolve");
 const TypeScriptFileUpdate_1 = require("../../templates/webcomponents/TypeScriptFileUpdate");
 class IgniteUIForWebComponentsTemplate {
     constructor(rootPath) {
@@ -59,7 +58,7 @@ class IgniteUIForWebComponentsTemplate {
         config["description"] = this.description;
         config["cliVersion"] = cli_core_1.Util.version();
         config["camelCaseName"] = cli_core_1.Util.camelCase(name);
-        config["dockManagerPackage"] = (0, package_resolve_1.resolveIgcPackage)(package_resolve_1.NPM_DOCK_MANAGER);
+        config["dockManagerPackage"] = (0, cli_core_1.resolvePackage)(cli_core_1.NPM_DOCK_MANAGER);
         return config;
     }
     folderName(pathName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "13.1.11",
+  "version": "13.1.12-beta.2",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~17.1.13111",
-    "@igniteui/cli-core": "~13.1.11",
+    "@igniteui/angular-templates": "^17.1.13112-beta.2",
+    "@igniteui/cli-core": "^13.1.12-beta.2",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

package/templates/react/ReactTypeScriptFileUpdate.d.ts

@@ -18,18 +18,18 @@ export declare class ReactTypeScriptFileUpdate {
     constructor(targetPath: string);
     /** Applies accumulated transforms, saves and formats the file */
     finalize(): void;
-    addRoute(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    addRoute(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, defaultRoute?: boolean): void;
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
     protected initState(): void;
     protected loadImportsMeta(): {
         lastIndex: number;
         modulePaths: any[];
     };
-    protected addRouteModuleEntry(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
-    protected requestImport(modulePath: string, routerAlias: string, componentName: string): void;
+    protected addRouteModuleEntry(path: string, component: string, name: string, filePath: string, routerChildren: string, importAlias: string, defaultRoute?: boolean): void;
+    protected requestImport(modulePath: string, routerAlias: string, componentName: string, namedImport?: boolean): void;
     /** Add `import` statements not previously found in the file  */
     protected addNewFileImports(): void;
-    protected createIdentifierImport(importPath: string, as: string, component: string): ts.ImportDeclaration;
+    protected createIdentifierImport(importPath: string, as: string, component: string, namedImport: boolean): ts.ImportDeclaration;
     /** Transformation to apply edits to existing named import declarations */
     protected importsTransformer: ts.TransformerFactory<ts.Node>;
     /** Format a TS source file, very TBD */

package/templates/react/ReactTypeScriptFileUpdate.js

@@ -46,8 +46,8 @@ class ReactTypeScriptFileUpdate {
         // reset state in case of further updates
         this.initState();
     }
-    addRoute(path, component, name, filePath, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        this.addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, routesVariable);
+    addRoute(path, component, name, filePath, routerChildren, importAlias, defaultRoute = false) {
+        this.addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, defaultRoute);
     }
     //#region File state
     /** Initializes existing imports info, [re]sets import and `NgModule` edits */
@@ -82,12 +82,15 @@ class ReactTypeScriptFileUpdate {
         return meta;
     }
     //#endregion File state
-    addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
-        const isRouting = path.indexOf("routes") >= 0;
+    addRouteModuleEntry(path, component, name, filePath, routerChildren, importAlias, defaultRoute = false) {
+        const isRouting = path.indexOf(DEFAULT_ROUTES_VARIABLE) >= 0;
         if (isRouting && this.targetSource.text.indexOf(path.slice(0, -4)) > 0) {
             return;
         }
-        if (path) {
+        if (defaultRoute) {
+            this.requestImport("react-router-dom", undefined, "redirect", true);
+        }
+        else {
             const relativePath = cli_core_1.Util.relativePath(this.targetPath, filePath, true, true);
             this.requestImport(relativePath, importAlias, component);
         }
@@ -96,7 +99,7 @@ class ReactTypeScriptFileUpdate {
             // the visitor that should be used when adding routes to the main route array
             const conditionalVisitor = (node) => {
                 if (node.kind === ts.SyntaxKind.ArrayLiteralExpression) {
-                    const newObject = this.createRouteEntry(path, component, name, routerChildren);
+                    const newObject = this.createRouteEntry(path, component, name, routerChildren, defaultRoute);
                     const array = node;
                     this.createdStringLiterals.push(path, name);
                     const notFoundWildCard = ".*";
@@ -126,7 +129,7 @@ class ReactTypeScriptFileUpdate {
             if (!isRouting) {
                 visitCondition = (node) => {
                     return node.kind === ts.SyntaxKind.VariableDeclaration &&
-                        node.name.getText() === routesVariable;
+                        node.name.getText() === DEFAULT_ROUTES_VARIABLE;
                     // no type currently
                     //(node as ts.VariableDeclaration).type.getText() === "Route[]";
                 };
@@ -145,20 +148,19 @@ class ReactTypeScriptFileUpdate {
         }).transformed[0];
         this.finalize();
     }
-    requestImport(modulePath, routerAlias, componentName) {
+    requestImport(modulePath, routerAlias, componentName, namedImport = false) {
         const existing = this.requestedImports.find(x => x.from === modulePath);
+        // TODO: better check for named imports. There could be several named imports from same modulePath
         if (!existing) {
             // new imports, check if already exists in file
             this.requestedImports.push({
                 as: routerAlias,
                 from: modulePath,
                 component: componentName,
-                edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1
+                edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1,
+                namedImport
             });
         }
-        else {
-            return;
-        }
     }
     /** Add `import` statements not previously found in the file  */
     addNewFileImports() {
@@ -168,13 +170,13 @@ class ReactTypeScriptFileUpdate {
         }
         const newStatements = ts.factory.createNodeArray([
             ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
-            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component)),
+            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component, x.namedImport)),
             ...this.targetSource.statements.slice(this.importsMeta.lastIndex)
         ]);
         newImports.forEach(x => this.createdStringLiterals.push(x.from));
         this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
     }
-    createIdentifierImport(importPath, as, component) {
+    createIdentifierImport(importPath, as, component, namedImport) {
         let exportedObject;
         let exportedObjectName;
         let importClause;
@@ -186,7 +188,14 @@ class ReactTypeScriptFileUpdate {
             ]));
         }
         else {
-            importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
+            if (namedImport) {
+                const importSpecifier = ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(component));
+                const imports = ts.factory.createNamedImports([importSpecifier]);
+                importClause = ts.factory.createImportClause(false, undefined, imports);
+            }
+            else {
+                importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
+            }
         }
         const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, importClause, ts.factory.createStringLiteral(importPath, true));
         return importDeclaration;
@@ -316,7 +325,14 @@ class ReactTypeScriptFileUpdate {
             return node;
         };
     }
-    createRouteEntry(path, component, name, routerAlias) {
+    createRouteEntry(path, component, name, routerAlias, defaultRoute = false) {
+        if (defaultRoute) {
+            // for default route in React we should generate index: true, loader: () => redirect(path)
+            const index = ts.factory.createPropertyAssignment("index", ts.factory.createTrue());
+            const loader = ts.factory.createArrowFunction(undefined, undefined, [], undefined, undefined, ts.factory.createCallExpression(ts.factory.createIdentifier("redirect"), [], [ts.factory.createStringLiteral(path, true)]));
+            const redirect = ts.factory.createPropertyAssignment("loader", loader);
+            return ts.factory.createObjectLiteralExpression([index, redirect]);
+        }
         const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(path, true));
         const jsxElement = ts.factory.createJsxSelfClosingElement(ts.factory.createIdentifier(component), [], undefined);
         const routeComponent = ts.factory.createPropertyAssignment("element", jsxElement);
@@ -325,9 +341,7 @@ class ReactTypeScriptFileUpdate {
             const childrenData = ts.factory.createPropertyAssignment("children", ts.factory.createIdentifier(routerAlias));
             return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData, childrenData]);
         }
-        else {
-            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
-        }
+        return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
     }
 }
 exports.ReactTypeScriptFileUpdate = ReactTypeScriptFileUpdate;

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.tsx

@@ -6,51 +6,51 @@ IgrBulletGraphModule.register();
 
 
 export default function $(ClassName)() {
-    const title = 'Bullet Graph';
+  const title = 'Bullet Graph';
 
-    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/bulletgraph.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.graph}>
-					<IgrBulletGraph
-						height="80px" width="400px"
-						minimumValue={0} value={70} interval={10}
-						maximumValue={100} targetValue={90}
-						isScaleInverted={false}
-						scaleBackgroundBrush="DodgerBlue"
-						scaleBackgroundOutline="DarkViolet"
-						scaleBackgroundThickness={2}
-						scaleStartExtent={0.05}
-						scaleEndExtent={0.95}>
-					</IgrBulletGraph>
-				</div>
-				<div className={style.graph}>
-					<IgrBulletGraph
-						value={50}
-						valueBrush="DodgerBlue"
-						valueStrokeThickness={1}
-						valueInnerExtent={0.5}
-						valueOuterExtent={0.65}
-						targetValue={80}
-						targetValueBreadth={10}
-						targetValueBrush="LimeGreen"
-						targetValueOutline="LimeGreen"
-						targetValueStrokeThickness={1}
-						targetValueInnerExtent={0.3}
-						targetValueOuterExtent={0.85}
-						height="80px" width="400px"
-						minimumValue={0}
-						maximumValue={100}>
-					</IgrBulletGraph>
-				</div>
-			</div>
-		</div>
-	)
+  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/bulletgraph.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.graph}>
+          <IgrBulletGraph
+            height="80px" width="400px"
+            minimumValue={0} value={70} interval={10}
+            maximumValue={100} targetValue={90}
+            isScaleInverted={false}
+            scaleBackgroundBrush="DodgerBlue"
+            scaleBackgroundOutline="DarkViolet"
+            scaleBackgroundThickness={2}
+            scaleStartExtent={0.05}
+            scaleEndExtent={0.95}>
+          </IgrBulletGraph>
+        </div>
+        <div className={style.graph}>
+          <IgrBulletGraph
+            value={50}
+            valueBrush="DodgerBlue"
+            valueStrokeThickness={1}
+            valueInnerExtent={0.5}
+            valueOuterExtent={0.65}
+            targetValue={80}
+            targetValueBreadth={10}
+            targetValueBrush="LimeGreen"
+            targetValueOutline="LimeGreen"
+            targetValueStrokeThickness={1}
+            targetValueInnerExtent={0.3}
+            targetValueOuterExtent={0.85}
+            height="80px" width="400px"
+            minimumValue={0}
+            maximumValue={100}>
+          </IgrBulletGraph>
+        </div>
+      </div>
+    </div>
+  )
 }

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

@@ -1,12 +1,12 @@
 :local(.container) {
-    padding-top: 24px;
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
 }
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }
 :local(.graph) {
-    width: 50%;
+  width: 50%;
 }

package/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/category-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -6,36 +6,36 @@ import style from './style.module.css';
 IgrCategoryChartModule.register();
 
 const data = [
-    { 'CountryName': 'China', 'Pop1995': 1216, 'Pop2005': 1297, 'Pop2015': 1361, 'Pop2025': 1394 },
-    { 'CountryName': 'India', 'Pop1995': 920, 'Pop2005': 1090, 'Pop2015': 1251, 'Pop2025': 1396 },
-    { 'CountryName': 'United States', 'Pop1995': 266, 'Pop2005': 295, 'Pop2015': 322, 'Pop2025': 351 },
-    { 'CountryName': 'Indonesia', 'Pop1995': 197, 'Pop2005': 229, 'Pop2015': 256, 'Pop2025': 277 },
-    { 'CountryName': 'Brazil', 'Pop1995': 161, 'Pop2005': 186, 'Pop2015': 204, 'Pop2025': 218 }
+  { 'CountryName': 'China', 'Pop1995': 1216, 'Pop2005': 1297, 'Pop2015': 1361, 'Pop2025': 1394 },
+  { 'CountryName': 'India', 'Pop1995': 920, 'Pop2005': 1090, 'Pop2015': 1251, 'Pop2025': 1396 },
+  { 'CountryName': 'United States', 'Pop1995': 266, 'Pop2005': 295, 'Pop2015': 322, 'Pop2025': 351 },
+  { 'CountryName': 'Indonesia', 'Pop1995': 197, 'Pop2005': 229, 'Pop2015': 256, 'Pop2025': 277 },
+  { 'CountryName': 'Brazil', 'Pop1995': 161, 'Pop2005': 186, 'Pop2015': 204, 'Pop2025': 218 }
 ];
 
 export default function $(ClassName)() {
-    const title = 'Category Chart';
-	const [chartData, setChartData] = useState([]);
+  const title = 'Category Chart';
+  const [chartData, setChartData] = useState([]);
 
-	useEffect(() => {
-		setChartData(data);
-	}, []);
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
-	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/categorychart.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<IgrCategoryChart dataSource={chartData}
-					width="100%"
-					height="500px">
-				</IgrCategoryChart>
-			</div>
-		</div>
-	)
+  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/categorychart.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <IgrCategoryChart dataSource={chartData}
+          width="100%"
+          height="500px">
+        </IgrCategoryChart>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/category-chart/default/files/src/app/__path__/style.module.css

@@ -1,9 +1,9 @@
 :local(.container) {
-    padding-top: 24px;
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
 }
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }

package/templates/react/igr-ts/category-chart/index.js

@@ -10,7 +10,7 @@ class IgrTsCategoryChartComponent extends cli_core_1.BaseComponent {
         this.name = "Category Chart";
         this.group = "Charts";
         this.description = `makes visualizing category data easy. Simplifies the complexities
-							of the data visualization domain into manageable API`;
+			of the data visualization domain into manageable API`;
     }
 }
 module.exports = new IgrTsCategoryChartComponent();

package/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });

package/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/__filePrefix__.tsx

@@ -14,50 +14,50 @@ IgrRingSeriesModule.register();
 
 
 const data = [
-    { MarketShare: 30, Company: "Google", },
-    { MarketShare: 15, Company: "Microsoft", },
-    { MarketShare: 30, Company: "Apple", },
-    { MarketShare: 15, Company: "Samsung", },
-    { MarketShare: 10, Company: "Other", },
+  { MarketShare: 30, Company: "Google", },
+  { MarketShare: 15, Company: "Microsoft", },
+  { MarketShare: 30, Company: "Apple", },
+  { MarketShare: 15, Company: "Samsung", },
+  { MarketShare: 10, Company: "Other", }
 ];
 
 export default function $(ClassName)() {
-    const title = 'Doughnut Chart';
-    const [chartData, setChartData] = useState([]);
-    const legendRef = useRef();
-    const chartRef = useRef();
+  const title = 'Doughnut Chart';
+  const [chartData, setChartData] = useState([]);
+  const legendRef = useRef();
+  const chartRef = useRef();
 
-    useEffect(() => {
-		setChartData(data);
-	}, []);
+  useEffect(() => {
+    setChartData(data);
+  }, []);
 
-	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/doughnutchart.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.legend}>
-					<IgrItemLegend ref={legendRef} />
-				</div>
-				<div className={style.chart}>
-					<IgrDoughnutChart ref={chartRef}
-						width="300px"
-						height="300px">
-						<IgrRingSeries
-							name="ring1"
-							dataSource={chartData}
-							labelMemberPath="Company"
-							valueMemberPath="MarketShare"
-							legend={legendRef.current}
-							/>
-					</IgrDoughnutChart>
-				</div>
-			</div>
-		</div>
-	)
+  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/doughnutchart.html">
+          official documentation page
+        </a>
+      </div>
+      <div className={style.container}>
+        <div className={style.legend}>
+          <IgrItemLegend ref={legendRef} />
+        </div>
+        <div className={style.chart}>
+          <IgrDoughnutChart ref={chartRef}
+            width="300px"
+            height="300px">
+            <IgrRingSeries
+              name="ring1"
+              dataSource={chartData}
+              labelMemberPath="Company"
+              valueMemberPath="MarketShare"
+              legend={legendRef.current}
+              />
+          </IgrDoughnutChart>
+        </div>
+      </div>
+    </div>
+  )
 }

package/templates/react/igr-ts/doughnut-chart/default/files/src/app/__path__/style.module.css

@@ -1,9 +1,9 @@
 :local(.container) {
-    display: flex;
-    flex-flow: row;
-    justify-content: center;
-    padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  padding-top: 24px;
 }
 :local(.title) {
-    color: rgb(0, 153, 255);
+  color: rgb(0, 153, 255);
 }

package/templates/react/igr-ts/financial-chart/default/files/src/app/__path__/__filePrefix__.test.tsx

@@ -1,8 +1,8 @@
 import { expect, test } from 'vitest';
 import { render } from '@testing-library/react';
-import $(ClassName) from './index';
+import $(ClassName) from './$(path)';
 
 test('renders $(ClassName) component', () => {
-    const wrapper = render(<$(ClassName) />);
-    expect(wrapper).toBeTruthy();
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
 });