* feat(igr-es6): add Ignite UI for React project, grid, gauges and ch…

…arts templates (#440)

* feat(igr-es6): add Ignite UI for React project, grid and category chart templates

* feat(igr-es6): add Igr templates for Gauges and Charts, update component descriptions

* chore(*): update navigation styling, add grid with autoGen columns, update grid sample style

* chore(*): rename folders

* chore(*): fix alignment of financial chart zoom handler (bug)

* chore(*): fix gauge width in radial gauge template

* chore(*): fix lint errors in generated files, remove Financial Chart from step-by-step, update react-scripts version in package.json

* chore(*): remove financial chart template, remove react from default templates

lib/templates/IgniteUIForReactTemplate.ts

@@ -0,0 +1,106 @@
+import * as fs from "fs-extra";
+import * as path from "path";
+import { Util } from "../Util";
+
+export class IgniteUIForReactTemplate implements Template {
+	public components: string[];
+	public controlGroup: string;
+	public listInComponentTemplates: boolean = true;
+	public listInCustomTemplates: boolean = false;
+	public id: string;
+	public name: string;
+	public description: string;
+	public dependencies: string[] = [];
+	public framework: string = "react";
+	public projectType = "igr-es6";
+	public hasExtraConfiguration: boolean = false;
+	public packages = [];
+
+	// non-standard template prop
+	protected widget: string;
+
+	private configFile: string = "./src/routes.json";
+
+	/**
+	 * Base ReactTemplate constructor
+	 * @param rootPath The template folder path. Pass in `__dirname`
+	 */
+	constructor(private rootPath: string) { }
+
+	public generateFiles(projectPath: string, name: string, options: {}): Promise<boolean> {
+		let config = {};
+		if (options["extraConfig"]) {
+			config = options["extraConfig"];
+		}
+		const pathsConfig = {};
+
+		config["__path__"] = this.folderName(name); //folder name allowed spaces, any casing
+		config["$(name)"] = Util.nameFromPath(name); // this name should not have restrictions
+		config["$(ClassName)"] = Util.className(Util.nameFromPath(name)); //first letter capital, no spaces and no dashes,
+		config["$(cliVersion)"] = Util.version();
+		if (this.widget) {
+			config["$(widget)"] = this.widget;
+			config["$(Control)"] = Util.className(this.widget);
+		}
+		if (this.description) {
+			config["$(description)"] = this.description;
+		}
+
+		// copy/template files to project
+		if (!Util.validateTemplate(path.join(this.rootPath, "files"), projectPath, config, pathsConfig)) {
+			return Promise.resolve(false);
+		}
+		return Util.processTemplates(path.join(this.rootPath, "files"), projectPath, config, pathsConfig);
+	}
+
+	public registerInProject(projectPath: string, name: string, options?: AddTemplateArgs) {
+		if (options && options.skipRoute) {
+			return;
+		}
+		const configFile = fs.readFileSync(path.join(projectPath, this.configFile), "utf8");
+		const viewsArr = JSON.parse(configFile);
+		viewsArr.push({
+			componentPath: this.getViewLink(name),
+			path: "/" + this.folderName(Util.nameFromPath(name)),
+			text: this.getToolbarLink(name) });
+
+		fs.writeFileSync(path.join(projectPath, this.configFile), JSON.stringify(viewsArr, null, 4));
+	}
+	public getExtraConfiguration(): ControlExtraConfiguration[] {
+		throw new Error("Method not implemented.");
+	}
+	public setExtraConfiguration(extraConfigKeys: {}) {
+		throw new Error("Method not implemented.");
+	}
+
+	protected folderName(pathName: string): string {
+		//TODO: should remove the spaces
+		const parts = path.parse(pathName);
+		let folderName = pathName;
+		if (parts.dir) {
+			folderName = path.join(parts.dir, parts.name);
+			folderName = folderName.replace(/\\/g, "/");
+			// TODO: config-based "src/app"?
+			const relative = path.join(process.cwd(), "src/views", folderName);
+			// path.join will also resolve any '..' segments
+			// so if relative result doesn't start with CWD it's out of project root
+			if (!relative.startsWith(process.cwd())) {
+				Util.error(`Path ${"src/views/" + folderName} is not valid!`, "red");
+				process.exit(1);
+			}
+			//clean up potential leading spaces in folder names (`path/    name`):
+			folderName = folderName.replace(/\/\s+/g, "/");
+		}
+		return Util.lowerDashed(folderName);
+	}
+	protected getViewLink(name: string): string {
+		const filePath = "./views/" + this.folderName(name);
+		return filePath;
+	}
+
+	protected getToolbarLink(name: string): string {
+		name = Util.nameFromPath(name);
+		const toolbarLink = name.replace(/\w\S*/g, txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
+		return toolbarLink;
+	}
+}

templates/react/es6/index.ts

@@ -6,7 +6,7 @@ class ReactProjectLibrary extends BaseProjectLibrary {
 	 */
 	constructor() {
 		super(__dirname);
-		this.name = "React";
+		this.name = "Ignite UI for JavaScript React Wrappers";
 		this.projectType = "es6";
 		this.themes = ["infragistics", "infragistics.less", "infragistics.sass", "metro"];
 

templates/react/igr-es6/bullet-graph/default/files/src/views/__path__/index.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { IgrBulletGraphModule } from 'igniteui-react-gauges/ES5/igr-bullet-graph-module';
+import { IgrBulletGraph } from 'igniteui-react-gauges/ES5/igr-bullet-graph';
+import style from './style.css';
+
+IgrBulletGraphModule.register();
+
+
+export default class $(ClassName) extends Component {
+    title = 'Bullet Graph'
+    state = {
+        data: []
+    };
+
+    render() {
+        return (
+            <div>
+                <h1 className={style.title}>{this.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} value={50}
+                            maximumValue={100}>
+                        </IgrBulletGraph>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}

templates/react/igr-es6/bullet-graph/default/files/src/views/__path__/style.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%;
+}

templates/react/igr-es6/bullet-graph/default/files/src/views/__path__/test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import $(ClassName) from './index';
+
+// won't run https://github.com/facebook/create-react-app/issues/6020
+// TODO: see if template can 
+
+it('$(ClassName) renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<$(ClassName) />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

templates/react/igr-es6/bullet-graph/default/index.ts

@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrBulletGraphTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Bullet Graph"];
+		this.controlGroup = "Gauges";
+		this.listInComponentTemplates = true;
+		this.id = "bullet-graph";
+		this.projectType = "igr-es6";
+		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.6.4"]; // TODO: read version from igniteui-react-core in package.json
+	}
+}
+module.exports = new IgrBulletGraphTemplate();

templates/react/igr-es6/bullet-graph/index.ts

@@ -0,0 +1,15 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgrBulletGraphComponent extends 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 IgrBulletGraphComponent();

templates/react/igr-es6/category-chart/default/files/src/views/__path__/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { IgrCategoryChartModule } from 'igniteui-react-charts/ES5/igr-category-chart-module';
+import { IgrCategoryChart } from 'igniteui-react-charts/ES5/igr-category-chart';
+import style from './style.css';
+
+IgrCategoryChartModule.register();
+
+var 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 class $(ClassName) extends Component {
+    title = 'Category Chart'
+    state = {
+        data: []
+    }
+
+    componentDidMount() {
+        this.setState({ data });
+    }
+
+    render() {
+        return (
+            <div>
+                <h1 className={style.title}>{this.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={this.state.data}
+                        width="100%"
+                        height="500px">
+                    </IgrCategoryChart>
+                </div>
+            </div >
+        )
+    }
+}

templates/react/igr-es6/category-chart/default/files/src/views/__path__/style.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);
+}

templates/react/igr-es6/category-chart/default/files/src/views/__path__/test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import $(ClassName) from './index';
+
+// won't run https://github.com/facebook/create-react-app/issues/6020
+// TODO: see if template can 
+
+it('$(ClassName) renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<$(ClassName) />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

templates/react/igr-es6/category-chart/default/index.ts

@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrCategoryChartTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Category Chart"];
+		this.controlGroup = "Charts";
+		this.listInComponentTemplates = true;
+		this.id = "category-chart";
+		this.projectType = "igr-es6";
+		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@^16.6.4"]; // TODO: read version from igniteui-react-core in package.json
+	}
+}
+module.exports = new IgrCategoryChartTemplate();

templates/react/igr-es6/category-chart/index.ts

@@ -0,0 +1,16 @@
+
+import { BaseComponent } from "../../../../lib/BaseComponent";
+
+class IgrCategoryChartComponent extends 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 IgrCategoryChartComponent();