Update the CLI React wrappers to use React 19 (#1399)

Author: valadzhov

packages/cli/templates/react/igr-ts/bullet-graph/default/index.ts

@@ -10,7 +10,7 @@ class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Bullet Graph";
 		this.description = `allows for a linear and concise view of measures compared against a scale.`;
-		this.packages = ["igniteui-react-gauges@~18.7.0"];
+		this.packages = ["igniteui-react-gauges@~19.0.0"];
 	}
 }
 module.exports = new IgrTsBulletGraphTemplate();

packages/cli/templates/react/igr-ts/category-chart/default/index.ts

@@ -11,7 +11,7 @@ class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate {
 		this.name = "Category Chart";
 		this.description = `makes visualizing category data easy. Simplifies the complexities
 							of the data visualization domain into manageable API`;
-		this.packages = ["igniteui-react-charts@~18.7.0"];
+		this.packages = ["igniteui-react-charts@~19.0.0"];
 	}
 }
 module.exports = new IgrTsCategoryChartTemplate();

packages/cli/templates/react/igr-ts/doughnut-chart/default/index.ts

@@ -10,7 +10,7 @@ class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Doughnut Chart";
 		this.description = `proportionally illustrate the occurrences of variables.`;
-		this.packages = ["igniteui-react-charts@~18.7.0"];
+		this.packages = ["igniteui-react-charts@~19.0.0"];
 	}
 }
 module.exports = new IgrTsDoughnutChartTemplate();

packages/cli/templates/react/igr-ts/financial-chart/default/index.ts

@@ -12,7 +12,7 @@ class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate {
 		this.name = "Financial Chart";
 		this.description = `charting component that makes it easy to visualize financial data by
 							using a simple and intuitive API.`;
-		this.packages = ["igniteui-react-charts@~18.7.0"];
+		this.packages = ["igniteui-react-charts@~19.0.0"];
 	}
 }
 module.exports = new IgrTsFinancialChartTemplate();

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

@@ -21,7 +21,7 @@ export default function $(ClassName)() {
       </div>
       <div className={style.container}>
         <div className={style.grid}>
-          <IgrGrid autoGenerate="false" data={data}>
+          <IgrGrid autoGenerate={false} data={data}>
             <IgrColumn
               field="ProductID"
               header="Product ID"
@@ -50,7 +50,7 @@ export default function $(ClassName)() {
           </IgrGrid>
         </div>
         <div className={style.grid}>
-          <IgrGrid autoGenerate="true" data={data} />
+          <IgrGrid autoGenerate={true} data={data} />
         </div>
       </div>
     </div>

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

@@ -14,8 +14,8 @@ class GridTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.components = ["Grid"];
 		this.controlGroup = "Data Grids";
-		this.packages = ["igniteui-react-grids@~18.7.0", "igniteui-react-inputs@~18.7.0",
-			"igniteui-react-layouts@~18.7.0", "igniteui-react@~18.7.0"];
+		this.packages = ["igniteui-react-grids@~19.0.2", "igniteui-react-inputs@~19.0.0",
+			"igniteui-react-layouts@~19.0.0", "igniteui-react@~19.0.3"];
 
 		this.hasExtraConfiguration = false;
 	}

packages/cli/templates/react/igr-ts/linear-gauge/default/index.ts

@@ -10,7 +10,7 @@ class IgrTsLinearGaugeTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Linear Gauge";
 		this.description = `value compared against a scale and one or more ranges.`;
-		this.packages = ["igniteui-react-gauges@~18.7.0"];
+		this.packages = ["igniteui-react-gauges@~19.0.0"];
 	}
 }
 module.exports = new IgrTsLinearGaugeTemplate();

packages/cli/templates/react/igr-ts/pie-chart/default/index.ts

@@ -10,7 +10,7 @@ class IgrTsPieChartTemplate extends IgniteUIForReactTemplate {
 		this.projectType = "igr-ts";
 		this.name = "Pie Chart";
 		this.description = `easily illustate the proportions of data entries`;
-		this.packages = ["igniteui-react-charts@~18.7.0"];
+		this.packages = ["igniteui-react-charts@~19.0.0"];
 	}
 }
 module.exports = new IgrTsPieChartTemplate();

packages/cli/templates/react/igr-ts/projects/_base/files/package.json

@@ -5,19 +5,19 @@
   "type": "module",
   "dependencies": {
     "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^16.3.0",
     "element-internals-polyfill": "^1.3.10",
     "functions-have-names": "^1.2.3",
-    "react": "^18.2.0",
+    "react": "^19.1.0",
     "react-app-polyfill": "^0.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.1.0",
     "react-router-dom": "^6.16.0",
     "resize-observer-polyfill": "^1.5.1",
     "vitest": "^0.34.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.21.0",
     "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react": "^4.0.3",

packages/cli/templates/react/igr-ts/radial-gauge/default/index.ts

@@ -12,7 +12,7 @@ class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate {
 		this.description = `provides a number of visual elements, like a needle, tick marks, ranges
 							and labels, in order to create a predefined shape and scale.`;
 		// TODO: read version from igniteui-react-core in package.json
-		this.packages = ["igniteui-react-gauges@~18.7.0"];
+		this.packages = ["igniteui-react-gauges@~19.0.0"];
 	}
 }
 module.exports = new IgrTsRadialGaugeTemplate();