igniteui-cli 13.0.2 → 13.1.0-beta.0

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

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

package/templates/react/igr-ts/bullet-graph/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/bullet-graph/default/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Bullet Graph"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "bullet-graph";
+        this.projectType = "igr-ts";
+        this.name = "Bullet Graph";
+        this.description = `allows for a linear and concise view of measures compared against a scale.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@18.3.0"];
+    }
+}
+module.exports = new IgrTsBulletGraphTemplate();

package/templates/react/igr-ts/bullet-graph/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/bullet-graph/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsBulletGraphComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Bullet Graph";
+        this.group = "Gauges";
+        this.description = `allows for a linear and concise view of measures compared against a scale.`;
+    }
+}
+module.exports = new IgrTsBulletGraphComponent();

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

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

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

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { IgrCategoryChartModule } from 'igniteui-react-charts';
+import { IgrCategoryChart } from 'igniteui-react-charts';
+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 }
+];
+
+export default function $(ClassName)() {
+    const title = 'Category Chart';
+	const [chartData, setChartData] = useState([]);
+
+	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>
+	)
+}

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

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

package/templates/react/igr-ts/category-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsCategoryChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Category Chart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "category-chart";
+        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`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@18.3.0"];
+    }
+}
+module.exports = new IgrTsCategoryChartTemplate();

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsCategoryChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        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`;
+    }
+}
+module.exports = new IgrTsCategoryChartComponent();

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

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

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

@@ -0,0 +1,63 @@
+import { useEffect, useRef, useState } from 'react';
+import { IgrDoughnutChartModule } from 'igniteui-react-charts';
+import { IgrDoughnutChart } from 'igniteui-react-charts';
+import { IgrRingSeriesModule } from 'igniteui-react-charts';
+import { IgrRingSeries } from 'igniteui-react-charts';
+import { IgrItemLegendModule } from 'igniteui-react-charts';
+import { IgrItemLegend } from 'igniteui-react-charts';
+import style from './style.module.css';
+
+IgrItemLegendModule.register();
+
+IgrDoughnutChartModule.register();
+IgrRingSeriesModule.register();
+
+
+const data = [
+    { 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();
+
+    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>
+	)
+}

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

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

package/templates/react/igr-ts/doughnut-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/doughnut-chart/default/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsDoughnutChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Doughnut Chart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "doughnut-chart";
+        this.projectType = "igr-ts";
+        this.name = "Doughnut Chart";
+        this.description = `proportionally illustrate the occurrences of variables.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@18.3.0"];
+    }
+}
+module.exports = new IgrTsDoughnutChartTemplate();

package/templates/react/igr-ts/doughnut-chart/index.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsDoughnutChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Doughnut Chart";
+        this.group = "Charts";
+        this.description = `proportionally illustrate the occurrences of variables.`;
+    }
+}
+module.exports = new IgrTsDoughnutChartComponent();

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

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

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

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react'
+import { IgrFinancialChartModule } from 'igniteui-react-charts';
+import { IgrFinancialChart } from 'igniteui-react-charts';
+import style from './style.module.css';
+
+IgrFinancialChartModule.register();
+
+const data = [
+	{ time: new Date(2013, 1, 1), open: 268.93, high: 268.93, low: 262.80, close: 265.00, volume: 6118146 },
+	{ time: new Date(2013, 1, 4), open: 262.78, high: 264.68, low: 259.07, close: 259.98, volume: 3723793 },
+	{ time: new Date(2013, 1, 5), open: 262.00, high: 268.03, low: 261.46, close: 266.89, volume: 4013780 },
+	{ time: new Date(2013, 1, 6), open: 265.16, high: 266.89, low: 261.11, close: 262.22, volume: 2772204 },
+	{ time: new Date(2013, 1, 7), open: 264.10, high: 264.10, low: 255.11, close: 260.23, volume: 3977065 },
+	{ time: new Date(2013, 1, 8), open: 261.40, high: 265.25, low: 260.56, close: 261.95, volume: 3879628 },
+	{ time: new Date(2013, 1, 11), open: 263.20, high: 263.25, low: 256.60, close: 257.21, volume: 3407457 },
+	{ time: new Date(2013, 1, 12), open: 259.19, high: 260.16, low: 257.00, close: 258.70, volume: 2944730 },
+	{ time: new Date(2013, 1, 13), open: 261.53, high: 269.96, low: 260.30, close: 269.47, volume: 5295786 },
+	{ time: new Date(2013, 1, 14), open: 267.37, high: 270.65, low: 265.40, close: 269.24, volume: 3464080 },
+	{ time: new Date(2013, 1, 15), open: 267.63, high: 268.92, low: 263.11, close: 265.09, volume: 3981233 }
+];
+
+
+export default function $(ClassName)() {
+	const title = 'Financial Chart';
+	const [chartData, setChartData] = useState([]);
+
+	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/financialchart.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<IgrFinancialChart
+					width="700px"
+					height="500px"
+					dataSource={chartData}>
+				</IgrFinancialChart>
+			</div>
+		</div>
+	)
+}

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

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

package/templates/react/igr-ts/financial-chart/default/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/financial-chart/default/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsFinancialChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Financial Chart"];
+        this.controlGroup = "Charts";
+        // set to true once bug with chart destoy is fixed
+        this.listInComponentTemplates = false;
+        this.id = "financial-chart";
+        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.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-charts@18.3.0"];
+    }
+}
+module.exports = new IgrTsFinancialChartTemplate();

package/templates/react/igr-ts/financial-chart/index.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsFinancialChartComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Financial Chart";
+        this.group = "Charts";
+        this.description = `charting component that makes it easy to visualize financial data by
+							using a simple and intuitive API.`;
+    }
+}
+module.exports = new IgrTsFinancialChartComponent();

package/templates/react/igr-ts/grid/basic/files/src/app/__path__/__filePrefix__.test.tsx

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

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

@@ -0,0 +1,58 @@
+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/grid/basic/files/src/app/__path__/data.tsx

@@ -0,0 +1,46 @@
+export default [{
+    Discontinued: false,
+    OrderDate: new Date('2012-02-12'),
+    ProductID: 1,
+    ProductName: 'Chai',
+    QuantityPerUnit: '10 boxes x 20 bags',
+    ReorderLevel: 10,
+    UnitPrice: 18.0000,
+    UnitsInStock: 39
+}, {
+    Discontinued: false,
+    OrderDate: new Date('2003-03-17'),
+    ProductID: 2,
+    ProductName: 'Chang',
+    QuantityPerUnit: '24 - 12 oz bottles',
+    ReorderLevel: 25,
+    UnitPrice: 19.0000,
+    UnitsInStock: 17
+}, {
+    Discontinued: false,
+    OrderDate: new Date('2006-03-17'),
+    ProductID: 3,
+    ProductName: 'Aniseed Syrup',
+    QuantityPerUnit: '12 - 550 ml bottles',
+    ReorderLevel: 25,
+    UnitPrice: 10.0000,
+    UnitsInStock: 13
+}, {
+    Discontinued: false,
+    OrderDate: new Date('2016-03-17'),
+    ProductID: 4,
+    ProductName: 'Chef Antons Cajun Seasoning',
+    QuantityPerUnit: '48 - 6 oz jars',
+    ReorderLevel: 0,
+    UnitPrice: 22.0000,
+    UnitsInStock: 53
+}, {
+    Discontinued: true,
+    OrderDate: new Date('2011-11-11'),
+    ProductID: 5,
+    ProductName: 'Chef Antons Gumbo Mix',
+    QuantityPerUnit: '36 boxes',
+    ReorderLevel: 0,
+    UnitPrice: 21.3500,
+    UnitsInStock: 0
+}];

package/templates/react/igr-ts/grid/basic/files/src/app/__path__/style.module.css

@@ -0,0 +1,17 @@
+:local(.container) {
+	padding-top: 24px;
+	display: flex;
+	flex-flow: column;
+	justify-content: center;
+	align-items: center;
+}
+
+:local(.title) {
+	color: rgb(0, 153, 255);
+}
+
+:local(.grid) {
+	width: 80%;
+	margin-bottom: 24px;
+	border: 1px solid rgb(0, 153, 255);
+}

package/templates/react/igr-ts/grid/basic/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/grid/basic/index.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class GridTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.id = "grid";
+        this.name = "Grid";
+        this.widget = "igGrid";
+        this.description = "IgrGrid template for React";
+        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@18.3.0", "igniteui-react-inputs@18.3.0",
+            "igniteui-react-layouts@18.3.0"];
+        this.hasExtraConfiguration = false;
+    }
+}
+module.exports = new GridTemplate();

package/templates/react/igr-ts/grid/index.d.ts

@@ -0,0 +1 @@
+export {};

package/templates/react/igr-ts/grid/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsDataGridComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Data Grid";
+        this.group = "Grids & Lists";
+        this.description = "pick from grids: basic, sorting, templating.";
+    }
+}
+module.exports = new IgrTsDataGridComponent();

package/templates/react/igr-ts/groups.json

@@ -0,0 +1,5 @@
+{
+	"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."
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
+    constructor() {
+        super(__dirname);
+        this.name = "Ignite UI for React TS";
+        this.projectType = "igr-ts";
+        this.themes = ["default"];
+        const groups = require("./groups.json");
+        // tslint:disable-next-line:forin
+        for (const key in groups) {
+            this.groupDescriptions.set(key, groups[key]);
+        }
+    }
+}
+module.exports = new IgrTsReactProjectLibrary();

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

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