igniteui-cli 12.0.6-alpha.0 → 12.0.6-beta.0

package/lib/templates/IgniteUIForReactTemplate.js

@@ -15,7 +15,6 @@ class IgniteUIForReactTemplate {
         this.listInCustomTemplates = false;
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-ts-es6"; // temp
         this.hasExtraConfiguration = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;

package/package.json

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

package/templates/react/{igr-ts-es6 → igr-ts}/bullet-graph/default/index.js

@@ -8,7 +8,7 @@ class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.controlGroup = "Gauges";
         this.listInComponentTemplates = true;
         this.id = "bullet-graph";
-        this.projectType = "igr-ts-es6";
+        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@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json

package/templates/react/{igr-ts-es6 → igr-ts}/category-chart/default/index.js

@@ -8,7 +8,7 @@ class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForR
         this.controlGroup = "Charts";
         this.listInComponentTemplates = true;
         this.id = "category-chart";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.name = "Category Chart";
         this.description = `makes visualizing category data easy. Simplifies the complexities
 							of the data visualization domain into manageable API`;

package/templates/react/{igr-ts-es6 → igr-ts}/doughnut-chart/default/index.js

@@ -8,7 +8,7 @@ class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForR
         this.controlGroup = "Charts";
         this.listInComponentTemplates = true;
         this.id = "doughnut-chart";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.name = "Doughnut Chart";
         this.description = `proportionally illustrate the occurrences of variables.`;
         this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json

package/templates/react/{igr-ts-es6 → igr-ts}/financial-chart/default/index.js

@@ -9,7 +9,7 @@ class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIFor
         // set to true once bug with chart destoy is fixed
         this.listInComponentTemplates = false;
         this.id = "financial-chart";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.name = "Financial Chart";
         this.description = `charting component that makes it easy to visualize financial data by
 							using a simple and intuitive API.`;

package/templates/react/igr-ts/grid/basic/files/src/views/__path__/index.tsx

@@ -0,0 +1,63 @@
+import { React } from 'react';
+import style from './style.module.css';
+import 'igniteui-react-grids/grids';
+import { IgrGridModule, IgrGrid, IgrColumn } from 'igniteui-react-grids';
+import 'igniteui-react-grids/grids/themes/light/bootstrap.css'
+
+import data from './data';
+
+IgrGridModule.register();
+
+export default function $(ClassName)() {
+	const title = 'Grid';
+
+	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/grid.html">
+            official documentation page
+          </a>
+        </div>
+        <div className={style.container}>
+          <div className={style.grid}>
+            <IgrGrid
+              autoGenerate="false"
+              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.grid}>
+            <IgrGrid
+              autoGenerate="true"
+              data={data} />
+          </div>
+        </div>
+      </div>
+	)
+}

package/templates/react/{igr-ts-es6 → igr-ts}/grid/basic/index.js

@@ -11,12 +11,12 @@ class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
         this.name = "Grid";
         this.widget = "igGrid";
         this.description = "IgrGrid template for React";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.components = ["Grid"];
         this.controlGroup = "Data Grids";
         // TODO: read version from igniteui-react-core in package.json
-        this.packages = ["igniteui-react-grids@~16.15.0", "igniteui-react-inputs@~16.15.0",
-            "igniteui-react-layouts@~16.15.0"];
+        this.packages = ["igniteui-react-grids@18.2.2-beta.0", "igniteui-react-inputs@18.2.2-beta.0",
+            "igniteui-react-layouts@18.2.2-beta.0"];
         this.hasExtraConfiguration = false;
     }
 }

package/templates/react/{igr-ts-es6 → igr-ts}/index.js

@@ -5,7 +5,7 @@ class IgrTsReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
     constructor() {
         super(__dirname);
         this.name = "Ignite UI for React TS";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.themes = ["default"];
         const groups = require("./groups.json");
         // tslint:disable-next-line:forin

package/templates/react/{igr-ts-es6 → igr-ts}/linear-gauge/default/index.js

@@ -8,7 +8,7 @@ class IgrTsLinearGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.controlGroup = "Gauges";
         this.listInComponentTemplates = true;
         this.id = "linear-gauge";
-        this.projectType = "igr-ts-es6";
+        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@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json

package/templates/react/{igr-ts-es6 → igr-ts}/pie-chart/default/index.js

@@ -8,7 +8,7 @@ class IgrTsPieChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactT
         this.controlGroup = "Charts";
         this.listInComponentTemplates = true;
         this.id = "pie-chart";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.name = "Pie Chart";
         this.description = `easily illustate the proportions of data entries`;
         this.packages = ["igniteui-react-charts@~16.15.0"]; // TODO: read version from igniteui-react-core in package.json

package/templates/react/{igr-ts-es6 → igr-ts}/projects/_base/files/ignite-ui-cli.json

@@ -3,7 +3,7 @@
 	"project": {
 		"defaultPort": 3003,
 		"framework": "react",
-		"projectType": "igr-ts-es6",
+		"projectType": "igr-ts",
 		"projectTemplate": "$(projectTemplate)",
 		"theme": "$(theme)",
 		"isBundle": false,

package/templates/react/{igr-ts-es6 → igr-ts}/projects/_base/files/package.json

@@ -4,17 +4,19 @@
   "private": true,
   "type": "module",
   "dependencies": {
-	"@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
     "functions-have-names": "^1.2.3",
+    "igniteui-react": "18.2.2-beta.0",
     "igniteui-react-core": "18.2.2-beta.0",
     "react": "^18.2.0",
     "react-app-polyfill": "^0.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "5.3.4",
-	"react-native-get-random-values": "^1.9.0",
+    "react-native-get-random-values": "^1.9.0",
     "resize-observer-polyfill": "^1.5.1",
-	"vitest": "^0.34.4"
+    "vitest": "^0.34.4",
+    "igniteui-dockmanager": "^1.13.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
@@ -25,10 +27,10 @@
     "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-	"jsdom": "^22.1.0",
+    "jsdom": "^22.1.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.9",
-	"vitest-canvas-mock": "^0.3.3",
+    "vitest-canvas-mock": "^0.3.3",
     "igniteui-cli": "~$(cliVersion)"
   },
   "scripts": {
@@ -36,7 +38,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-	"test": "vitest"
+    "test": "vitest"
   },
   "eslintConfig": {
     "extends": "react-app"

package/templates/react/igr-ts/projects/_base/files/src/App.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BrowserRouter as Router } from "react-router-dom";
+
+export default function App() {
+
+	return (
+    <div className="app">
+      <Router></Router>
+    </div>
+	)
+}

package/templates/react/igr-ts/projects/_base_with_home/files/src/App.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import App from './App';
+
+test('renders without crashing', () => {
+    const wrapper = render(<App />);
+    expect(wrapper).toBeTruthy();
+});

package/templates/react/{igr-ts-es6 → igr-ts}/projects/_base_with_home/index.js

@@ -11,7 +11,7 @@ class BaseWithHomeIgrTsProject extends _base_1.BaseIgrTsProject {
         this.description = "React project structure with home view";
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
     }
     get templatePaths() {

package/templates/react/igr-ts/projects/base/index.d.ts

@@ -0,0 +1,14 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseIgrTsProject } from "../_base";
+export declare class BasePageIgrTsProject extends BaseIgrTsProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: BasePageIgrTsProject;
+export default _default;

package/templates/react/igr-ts/projects/base/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasePageIgrTsProject = void 0;
+const path = require("path");
+const _base_1 = require("../_base");
+class BasePageIgrTsProject extends _base_1.BaseIgrTsProject {
+    constructor() {
+        super(...arguments);
+        this.id = "base";
+        this.name = "Base project";
+        this.description = "Empty project structure";
+        this.dependencies = [];
+        this.framework = "react";
+        this.projectType = "igr-ts";
+        this.hasExtraConfiguration = false;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.BasePageIgrTsProject = BasePageIgrTsProject;
+exports.default = new BasePageIgrTsProject();

package/templates/react/{igr-ts-es6 → igr-ts}/projects/empty/index.js

@@ -11,7 +11,7 @@ class EmptyIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
         this.description = "Empty project structure with home page";
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
     }
     get templatePaths() {

package/templates/react/igr-ts/projects/top-nav/files/src/setupTests.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom'
+import 'vitest-canvas-mock'
+import ResizeObserver from 'resize-observer-polyfill'
+
+global.ResizeObserver = ResizeObserver

package/templates/react/{igr-ts-es6 → igr-ts}/projects/top-nav/index.js

@@ -11,7 +11,7 @@ class TopNavIgrTsProject extends _base_1.BaseIgrTsProject {
         this.description = "Project structure with top navigation menu";
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.hasExtraConfiguration = false;
     }
     get templatePaths() {

package/templates/react/{igr-ts-es6 → igr-ts}/radial-gauge/default/index.js

@@ -8,7 +8,7 @@ class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForRea
         this.controlGroup = "Gauges";
         this.listInComponentTemplates = true;
         this.id = "radial-gauge";
-        this.projectType = "igr-ts-es6";
+        this.projectType = "igr-ts";
         this.name = "Radial Gauge";
         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.`;

package/templates/react/index.js

@@ -6,7 +6,7 @@ class ReactFramework {
         this.projectLibraries = [];
         this.projectLibraries.push(require("./es6"));
         this.projectLibraries.push(require("./igr-es6"));
-        this.projectLibraries.push(require("./igr-ts-es6"));
+        this.projectLibraries.push(require("./igr-ts"));
     }
 }
 module.exports = new ReactFramework();

package/templates/react/igr-ts-es6/grid/basic/files/src/views/__path__/index.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import style from './style.module.css';
-import { IgrDataGridModule  } from 'igniteui-react-grids';
-import { IgrDataGrid } from 'igniteui-react-grids';
-import { IgrNumericColumn } from 'igniteui-react-grids';
-import { IgrTextColumn } from 'igniteui-react-grids';
-import { IgrDateTimeColumn } from 'igniteui-react-grids';
-
-import data from './data';
-
-IgrDataGridModule.register();
-
-export default function $(ClassName)() {
-	const title = 'Grid';
-
-	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/grid.html">
-					official documentation page
-				</a>
-			</div>
-			<div className={style.container}>
-				<div className={style.grid}>
-					<IgrDataGrid
-						height="100%"
-						autoGenerateColumns="false"
-						dataSource={data}>
-						<IgrNumericColumn field="ProductID" headerText="Product ID" />
-						<IgrTextColumn field="ProductName" headerText="Product Name" />
-						<IgrTextColumn field="QuantityPerUnit" headerText="Quantity Per Unit" />
-						<IgrNumericColumn field="UnitsInStock" headerText="Units In Stock" />
-						<IgrDateTimeColumn field="OrderDate" headerText="Order Date" />
-					</IgrDataGrid>
-				</div>
-				<div className={style.grid}>
-					<IgrDataGrid
-						height="100%"
-						width="100%"
-						autoGenerateColumns="true"
-						dataSource={data} />
-				</div>
-			</div>
-		</div>
-	)
-}