igniteui-cli 12.0.5 → 12.0.6-alpha.1

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/views/__path__/index.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/linear-gauge/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import style from './style.module.css';
+import { IgrLinearGaugeModule } from 'igniteui-react-gauges';
+import { IgrLinearGauge } from 'igniteui-react-gauges';
+
+IgrLinearGaugeModule.register();
+
+export default function $(ClassName)() {
+    const title = 'Linear Gauge';
+	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/lineargauge.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.gauge}>
+					<IgrLinearGauge
+						height="80px" width="400px"
+						minimumValue={0}
+						maximumValue={100} interval={10}
+						value={50}
+						isNeedleDraggingEnabled={true}
+						needleShape="Custom"
+						needleBrush="DodgerBlue"
+						needleOutline="DodgerBlue"
+						needleStrokeThickness={1}
+						needleBreadth={15}
+						needleInnerExtent={0.35}
+						needleOuterExtent={0.65}
+						needleOuterPointExtent={0.8}
+						needleInnerPointExtent={0.325}
+						needleInnerPointWidth={0}
+						needleOuterPointWidth={0.3}
+						needleInnerBaseWidth={0}
+						needleOuterBaseWidth={0.07}>
+					</IgrLinearGauge>
+				</div>
+				<div className={style.gauge}>
+					<IgrLinearGauge
+						height="80px" width="400px"
+						minimumValue={0} value={50}
+						maximumValue={100} interval={10}
+						isScaleInverted={false}
+						scaleBrush="DodgerBlue"
+						scaleOutline="DarkViolet"
+						scaleStrokeThickness={1}
+						scaleInnerExtent={0.05}
+						scaleOuterExtent={0.65}
+						scaleStartExtent={0.05}
+						scaleEndExtent={0.95}>
+					</IgrLinearGauge>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/linear-gauge/default/files/src/views/__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(.gauge) {
+    width: 50%;
+}

package/templates/react/igr-ts/linear-gauge/default/index.d.ts

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

package/templates/react/igr-ts/linear-gauge/default/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsLinearGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Linear Gauge"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "linear-gauge";
+        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
+    }
+}
+module.exports = new IgrTsLinearGaugeTemplate();

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsLinearGaugeComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Linear Gauge";
+        this.group = "Gauges";
+        this.description = `value compared against a scale and one or more ranges.`;
+    }
+}
+module.exports = new IgrTsLinearGaugeComponent();

package/templates/react/igr-ts/pie-chart/default/files/src/views/__path__/index.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/pie-chart/default/files/src/views/__path__/index.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { IgrPieChartModule } from 'igniteui-react-charts';
+import { IgrPieChart } from 'igniteui-react-charts';
+import { IgrItemLegend } from 'igniteui-react-charts';
+import { IgrItemLegendModule } from 'igniteui-react-charts';
+import style from './style.module.css';
+
+IgrPieChartModule.register();
+IgrItemLegendModule.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 = 'Pie Chart';
+    const [chartData, setChartData] = useState([]);
+	let legendRef = useRef();
+    let 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/piechart.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.legend}>
+					<IgrItemLegend ref={legendRef} />
+				</div>
+				<div className={style.chart}>
+					<IgrPieChart dataSource={chartData}
+						labelMemberPath="Company"
+						valueMemberPath="MarketShare"
+						width="500px"
+						height="500px"
+						ref={chartRef}
+						legendLabelMemberPath="Label"
+						legend={legendRef.current}
+						/>
+
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/pie-chart/default/files/src/views/__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/pie-chart/default/index.d.ts

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsPieChartTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Pie Chart"];
+        this.controlGroup = "Charts";
+        this.listInComponentTemplates = true;
+        this.id = "pie-chart";
+        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
+    }
+}
+module.exports = new IgrTsPieChartTemplate();

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

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

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

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

package/templates/react/igr-ts/projects/_base/files/README.md

@@ -0,0 +1,48 @@
+# $(name)
+
+This project was generated with [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) version $(cliVersion).<br>
+The template builds upon a project bootstrapped with [Vite](https://vitejs.dev/).
+
+## Development server
+
+Run `ig start` to build the application, start a web server and open the application in the default browser. <br>
+The default serving port is `http://localhost:3003/`. Default serving port can be configured in `.env` via `PORT` property.
+
+## Build
+
+Run `ig build` to build the application into an output directory.
+
+## Step by step mode
+
+If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you to create and setup your new application, as well as update project previously created with the Ignite UI CLI. To start the guide, simply run the `ig` command.
+
+## List templates
+
+The `ig list` command lists all available templates for this project.
+
+## Adding components
+
+Add a new component or template to the project passing component ID and choosing a name.
+
+`ig add <component/template> <component_name>`
+
+The ID matches either a component ("grid", "category-chart", 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 unit tests.
+
+## Commands Help
+
+`ig help` lists the available commands and provides a brief description of what they do.
+
+## Learn More
+
+To get more help on the IgniteUI CLI go check out the [IgniteUI CLI Wiki](https://github.com/IgniteUI/igniteui-cli/wiki).
+
+Learn more about Vite features in the [Vite documentation](https://vitejs.dev/guide/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+
+

package/templates/react/igr-ts/projects/_base/files/__dot__editorconfig

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

package/templates/react/igr-ts/projects/_base/files/__dot__env

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

package/templates/react/igr-ts/projects/_base/files/__dot__eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/templates/react/igr-ts/projects/_base/files/__dot__gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

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

@@ -0,0 +1,16 @@
+{
+	"version": "$(cliVersion)",
+	"project": {
+		"defaultPort": 3003,
+		"framework": "react",
+		"projectType": "igr-ts",
+		"projectTemplate": "$(projectTemplate)",
+		"theme": "$(theme)",
+		"isBundle": false,
+		"components": [],
+		"sourceFiles": [],
+		"isShowcase": false,
+		"version": ""
+	},
+	"build": {}
+}

package/templates/react/igr-ts/projects/_base/files/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      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="/manifest.json" />
+    <title>IgniteUI for React</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>
+  <script type="module" src="/src/main.tsx"></script>
+</html>

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

@@ -0,0 +1,50 @@
+{
+  "name": "$(dash-name)",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+	"@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "functions-have-names": "^1.2.3",
+    "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",
+    "resize-observer-polyfill": "^1.5.1",
+	"vitest": "^0.34.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "@typescript-eslint/eslint-plugin": "^6.2.1",
+    "@typescript-eslint/parser": "^6.2.1",
+    "eslint": "^8.46.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+	"jsdom": "^22.1.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.9",
+	"vitest-canvas-mock": "^0.3.3",
+    "igniteui-cli": "~$(cliVersion)"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+	"test": "vitest"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

package/templates/react/igr-ts/projects/_base/files/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "$(name)",
+  "name": "$(name)",
+  "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/igr-ts/projects/_base/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/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/files/src/hoc/asyncComponent.tsx

@@ -0,0 +1,50 @@
+import React, {Component} from 'react';
+
+// https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html
+const makeCancelable = (promise) => {
+  let hasCanceled_ = false;
+  
+  const wrappedPromise = new Promise((resolve, reject) => {
+    promise.then(
+    val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
+    error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
+    );
+  });
+  
+  return {
+    promise: wrappedPromise,
+    cancel() {
+    hasCanceled_ = true;
+    },
+  };
+  };
+
+/**
+ * https://medium.com/front-end-weekly/loading-components-asynchronously-in-react-app-with-an-hoc-61ca27c4fda7
+ * @param {function} importComponent 
+ */
+const asyncComponent = (importComponent) => {
+  return class extends Component {
+    state = {
+      component: null
+    }
+
+    componentDidMount() {
+      this.op = makeCancelable(importComponent());
+      this.op.promise.then(cmp => {
+          this.setState({component: cmp.default});
+        });
+    }
+
+    componentWillUnmount() {
+      this.op.cancel();
+    }
+
+    render() {
+      const C = this.state.component;
+      return C ? <C {...this.props}/> : null;
+    }
+  }
+};
+
+export default asyncComponent;

package/templates/react/igr-ts/projects/_base/files/src/index.css

@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+import 'react-app-polyfill/ie11';
+
+/** Required in IE11 for Charts */
+Number.isNaN = Number.isNaN || function(value) {
+    // eslint-disable-next-line
+    return value !== value;
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();

package/templates/react/igr-ts/projects/_base/files/src/routes.json

@@ -0,0 +1,3 @@
+[
+
+]