igniteui-cli 8.2.0 → 8.2.3

package/templates/react/es6/hierarchical-grid/hierarchical-grid-export/files/src/components/__path__/index.js

@@ -0,0 +1,112 @@
+import { Component } from 'react';
+import * as $ from 'jquery';
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_core.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_collections.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_text.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_io.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_ui.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.documents.core_core.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_collectionsextended.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.excel_core.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_threading.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.ext_web.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.xml.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.documents.core_openxml.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.excel_serialization_openxml.js";
+import "@infragistics/ignite-ui-full/en/js/modules/infragistics.gridexcelexporter.js";
+import "file-saver";
+import $(Control) from "igniteui-react/ui/$(widget).js";
+import IgCombo from "igniteui-react/ui/igCombo.js";
+import IgButton from "igniteui-react/ui/igButton.js";
+import { northwind } from './northwind.js';
+import "./styles.css";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      northwind,
+      exportOptions:[{"text": "All Rows", "value": "allRows"}, {"text":"Expanded Rows", "value":"expandedRows"}],
+      exportOption: []
+    };
+
+    this.export = () => {
+      // export
+      $.ig.GridExcelExporter.exportGrid($("#hierarchicalGrid"), {
+        fileName: "igHierarchicalGrid",
+        worksheetName: 'Sheet1',
+        exportOption: this.state.exportOption
+      });
+    }
+    this.selectionChanged = (ev, ui) => {
+      this.setState({exportOption: ui.items[0]?.data.value || "allRows"}); //Export allRows as combo value can be cleared
+    }
+  }
+  render() {
+    return (
+      <div className="App">
+        <div className="App-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <div style={{textAlign: "center"}}>
+          <IgCombo
+            id="combo"
+            width="200px"
+            mode="dropdown"
+            responseDataKey="exportOptions"
+            dataSource={this.state}
+            selectionChanged={this.selectionChanged}
+             />
+
+          <IgButton
+            click={this.export}
+            onClick={this.export}
+            labelText="Export"
+          />
+        </div>
+
+        <$(Control)
+          id="hierarchicalGrid"
+          features={$(gridfeatures)}
+          width="100%"
+          autoCommit={true}
+          autoGenerateColumns={false}
+          autofitLastColumn={false}
+          dataSource={this.state.northwind}
+          responseDataKey="results"
+          dataSourceType="json"
+          columns={[
+            { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
+            { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
+            { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
+            { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
+            { key: "City", headerText: "City", dataType: "string", width: "15%" },
+            { key: "Region", headerText: "Region", dataType: "string", width: "10%" },
+            { key: "Country", headerText: "Country", dataType: "string", width: "0%", hidden: true }
+          ]}
+          childrenDataProperty="Orders"
+          autoGenerateLayouts={false}
+          columnLayouts={[
+            {
+              key: "Orders",
+              autoCommit: true,
+              autoGenerateColumns: false,
+              autofitLastColumn: false,
+              primaryKey: "OrderID",
+              width: "100%",
+              columns: [
+                { key: "OrderID", headerText: "Order ID", dataType: "number", width: "10%", hidden: true },
+                { key: "Freight", headerText: "Freight", dataType: "string", width: "15%" },
+                { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
+                { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "25%" },
+                { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
+                { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
+              ],
+            }
+          ]}
+        />
+
+      </div>
+    );
+  }
+}

package/templates/react/es6/hierarchical-grid/hierarchical-grid-export/files/src/components/__path__/styles.css

@@ -0,0 +1,13 @@
+.ui-igcombo-wrapper {
+  margin: 1px;
+}
+
+.ui-igbutton {
+  height: 30px;
+  vertical-align: top;
+  margin: 1px;
+}
+
+span#_lbl {
+  padding: 4px 16px
+}

package/templates/react/es6/hierarchical-grid/hierarchical-grid-export/index.js

@@ -15,11 +15,12 @@ class HierarchicalGridExportTemplate extends ReactTemplate_1.ReactTemplate {
         this.components = ["Hierarchical Grid"];
         this.controlGroup = "Data Grids";
         this.dependencies = ["igHierarchicalGrid"];
+        this.packages = ["file-saver@^2.0.5"];
         this.gridHelper = new GridHelper_1.GridHelper();
         this.gridHelper.hierarchical = true;
         this.hasExtraConfiguration = true;
         this.extraConfigurations.push({
-            choices: ["Summaries", "Hiding"],
+            choices: ["Paging", "Hiding"],
             default: "",
             key: "features",
             message: "Select features for the igHierarchicalGrid",

package/templates/react/es6/index.js

@@ -9,7 +9,7 @@ class ReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
         super(__dirname);
         this.name = "Ignite UI for jQuery React Wrappers";
         this.projectType = "es6";
-        this.themes = ["infragistics", "infragistics.less", "infragistics.sass", "metro"];
+        this.themes = ["default"];
         const groups = require("../../jquery/js/groups.json");
         // tslint:disable-next-line:forin
         for (const key in groups) {

package/templates/react/es6/line-chart/default/files/src/components/__path__/index.js

@@ -0,0 +1,76 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      population: [
+        { "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 }
+      ]
+    };
+  }
+  render() {
+    return (
+      <div className="$(ClassName)">
+        <div className="$(ClassName)-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <div style={{float: "left", marginLeft: "13vw"}}>
+          <$(Control)
+            id="linechart"
+            width="60vw"
+            height="400px"
+            legend={{ element: "lineLegend" }}
+            title="Population per Country"
+            subtitle="A comparison of population in 1995 and 2005"
+            dataSource={ this.state }
+            responseDataKey="population"
+            axes={[
+              {
+                name: "NameAxis",
+                type: "categoryX",
+                label: "CountryName"
+              },
+              {
+                name: "PopulationAxis",
+                type: "numericY",
+                minimumValue: 0,
+                title: "Millions of People",
+              }
+            ]}
+            series={[
+              {
+                name: "2005Population",
+                type: "line",
+                title: "2005",
+                xAxis: "NameAxis",
+                yAxis: "PopulationAxis",
+                valueMemberPath: "Pop2005",
+                isTransitionInEnabled: true,
+                isHighlightingEnabled: true,
+                thickness: 5
+              },
+              {
+                name: "1995Population",
+                type: "line",
+                title: "1995",
+                xAxis: "NameAxis",
+                yAxis: "PopulationAxis",
+                valueMemberPath: "Pop1995",
+                isTransitionInEnabled: true,
+                isHighlightingEnabled: true,
+                thickness: 5
+              }
+              ]}
+          />
+        </div>
+        <div id="lineLegend" style={{float: "left"}}></div>
+      </div>
+    );
+  }
+}

package/templates/react/es6/pie-chart/pie-chart/files/src/components/__path__/index.js

@@ -0,0 +1,38 @@
+import { Component } from 'react';
+import $(Control) from "igniteui-react/ui/$(widget).js";
+
+export default class $(ClassName) extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      population: [
+        { "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
+        { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
+        { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
+        { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
+        { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
+      ]
+    };
+  }
+  render() {
+    return (
+      <div className="$(ClassName)">
+        <div className="$(ClassName)-header">
+          <h2 style={{textAlign: "center"}}>$(description)</h2>
+        </div>
+        <div style={{display: "flex", flexFlow: "column", alignItems: "center"}}>
+          <$(Control)
+            id="piechart"
+            width="435px"
+            height="435px"
+            dataSource={this.state.population}
+            dataValue="Pop2008"
+            dataLabel="CountryName"
+                        labelsPosition="bestFit"
+
+            />
+        </div>
+      </div>
+    );
+  }
+}

package/templates/react/es6/projects/empty/files/README.md

@@ -1,10 +1,11 @@
 # $(name)
 
 This project was generated with [IgniteUI CLI](https://github.com/IgniteUI/igniteui-cli) version $(cliVersion).
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 ## Development server
 
-Run `ig start` to build the application, start a web server and open the application in the default browser. Then navigate to `http://localhost:3002/`. Default serving port can be configured in `ignite-ui-cli.json` via `defaultPort` property.
+Run `ig start` to build the application, start a web server and open the application in the default browser. Then navigate to `http://localhost:3002/`. Default serving port can be configured in `.env` via `PORT` property.
 
 ## Build
 
@@ -26,10 +27,6 @@ Add a new component or template to the project passing component ID and choosing
 
 The ID matches either a component ("grid", "combo", etc) or a predefined template. Predefined templates can provide either multiple components or fulfilling a specific use case like "form-validation", "master-detail" and so on.
 
-## Running unit tests
-
-Run `ig test` to execute the illustrative tests via [Jest](https://jestjs.io/) and [Enzyme](https://github.com/airbnb/enzyme) test setup. Runs all `.spec.js/jsx` and `.test.js/jsx` files under `__tests__` folder.
-
 ## Help
 
 `ig help` lists the available commands and provides a brief description of what they do.

package/templates/react/es6/projects/empty/files/__dot__editorconfig

@@ -1,3 +1,3 @@
 [*.js]
-indent_style=space
-indent_size=2
+indent_style = space
+indent_size = 2

package/templates/react/es6/projects/empty/files/__dot__env

@@ -0,0 +1 @@
+PORT=3002

package/templates/react/es6/projects/empty/files/__dot__gitignore

@@ -1,13 +1,23 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist
-/tmp
-/out-tsc
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
 
-# System Files
+# production
+/build
+
+# misc
 .DS_Store
-Thumbs.db
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

package/templates/react/es6/projects/empty/files/ignite-ui-cli.json

@@ -1,22 +1,21 @@
 {
-	"version" : "$(cliVersion)",
-	"project": {
-		"defaultPort": 3002,
-		"framework" : "react",
-		"projectType": "es6",
-		"projectTemplate": "empty",
-		"theme": "$(theme)",
-		"themePath": "$(themePath)",
-		"cssPath": "$(cssPath)",
-		"jsPath": "$(jsPath)",
-		"isBundle": false,
-		"bundleFilePath": "/igniteui/dist/ignite.js",
-		"igniteuiSource": "./node_modules/ignite-ui",
-		"components": [],
-		"isShowcase": false,
-		"version": "",
-		"sourceRoot": "./client"
-	},
-	"build" : {
-	}
-}
+  "version": "$(cliVersion)",
+  "project": {
+    "defaultPort": 3002,
+    "framework": "react",
+    "projectType": "es6",
+    "projectTemplate": "empty",
+    "theme": "$(theme)",
+    "themePath": "$(themePath)",
+    "cssPath": "$(cssPath)",
+    "jsPath": "$(jsPath)",
+    "isBundle": false,
+    "bundleFilePath": "",
+    "igniteuiSource": "./node_modules/ignite-ui",
+    "components": [],
+    "isShowcase": false,
+    "version": "",
+    "sourceRoot": "./"
+  },
+  "build": {}
+}

package/templates/react/es6/projects/empty/files/package.json

@@ -2,51 +2,41 @@
   "name": "$(dash-name)",
   "version": "0.0.0",
   "private": true,
-  "description": "React project for Ignite UI CLI",
-  "author": "PwnJS",
-  "main": "index.js",
-  "scripts": {
-    "start": "webpack-dev-server --config webpack.config.js",
-    "prod": "node build.js production server",
-    "build": "node build.js production filesystem",
-    "test": "jest"
-  },
-  "jest": {
-    "testMatch": [
-      "<rootDir>/__tests__/**/?(*.)(spec|test).{js,jsx}"
-    ],
-    "testURL": "http://localhost/"
+  "dependencies": {
+    "ignite-ui": "21.1.13",
+    "igniteui-react": "^1.3.2",
+    "jquery": "^3.6.0",
+    "jquery-ui": "^1.12.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.0.1"
   },
-  "license": "MIT",
   "devDependencies": {
-    "babel-core": "6.16.0",
-    "babel-loader": "6.2.7",
-    "babel-plugin-transform-runtime": "6.15.0",
-    "babel-preset-es2015": "6.18.0",
-    "babel-preset-react": "6.22.0",
-    "css-loader": "0.14.5",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-15": "^1.0.5",
-    "extract-text-webpack-plugin": "2.0.0-beta.5",
-    "file-loader": "0.8.5",
-    "html-webpack-plugin": "2.26.0",
-    "igniteui-cli": "^$(cliVersion)",
-    "jest": "^22.4.2",
-    "node-sass": "^4.9.0",
-    "react-test-renderer": "^15.6.2",
-    "sass-loader": "3.2.3",
-    "style-loader": "0.13.1",
-    "webpack": "2.2.0",
-    "webpack-dev-server": "3.10.3"
+    "igniteui-cli": "^$(cliVersion)"
   },
-  "dependencies": {
-    "babel-runtime": "6.22.0",
-    "react": "15.6.2",
-    "react-dom": "15.6.2",
-    "react-router": "2.8.0",
-    "ignite-ui": "~20.1",
-    "jquery": ">=1.9.1",
-    "jquery-ui": ">=1.10.5",
-    "igniteui-react": "^1.3.0"
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

package/templates/react/es6/projects/empty/files/public/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>Ignite UI CLI React Wrappers</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

package/templates/react/es6/projects/empty/files/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/templates/react/es6/projects/empty/files/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/templates/react/es6/projects/empty/files/src/App.css

@@ -0,0 +1,52 @@
+.content {
+  display: flex;
+  justify-content: center;
+}
+
+/* quick nav menubar */
+nav,
+.app__name {
+  background-color: rgb(0, 153, 255);
+  box-sizing: border-box;
+}
+.app__name {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 32px;
+  padding-left: 24px;
+  text-align: left;
+  color: #fff;
+  padding-bottom: 8px;
+}
+
+nav ul {
+  list-style: none;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+
+nav ul a {
+  color: #fff;
+  line-height: 2;
+  text-decoration: none;
+  margin: 0 5px;
+}
+
+nav ul a.active {
+  color: #fff;
+  font-weight: 600;
+}
+nav ul li {
+  margin: 0px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid transparent;
+}
+nav ul li.active {
+  border-bottom: 2px solid #fff;
+}
+nav ul li:not(.active):hover {
+  border-bottom: 1px solid #fff;
+}

package/templates/react/es6/projects/empty/files/src/App.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
+import asyncComponent from "./hoc/asyncComponent";
+import NavigationHeader from "./components/navigation-header/index";
+import routes from "./routes.json";
+import "./App.css";
+
+import "jquery";
+import "jquery-ui";
+import "./igniteuiResources.js";
+
+const name = "$(name)";
+
+function App() {
+  return (
+    <Router>
+      <div className="app">
+        <div className="app__name">{name}</div>
+        <NavigationHeader routes={routes}></NavigationHeader>
+        <div className="content">
+          <Switch>
+            {routes.map((route, i) => (
+              <Route
+                exact
+                key={i}
+                path={route.path}
+                component={asyncComponent(() =>
+                  import("" + route.componentPath)
+                )}
+              />
+            ))}
+          </Switch>
+        </div>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

package/templates/react/es6/projects/empty/files/src/components/home/index.js

@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+
+export default class Home extends Component {
+  state = {};
+
+  render() {
+    return (
+      <article>
+        <h1>Welcome to Ignite UI for React Wrappers!</h1>
+        <a
+          href="https://github.com/IgniteUI/igniteui-react-wrappers"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            src="https://static.infragistics.com/marketing/Website/products/ignite/Ignite-header-apps-960.png"
+            alt="Ignite UI"
+            height="550"
+            width="550"
+          />
+        </a>
+      </article>
+    );
+  }
+}