igniteui-cli 12.0.6 → 12.1.0-beta.1

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

@@ -0,0 +1,21 @@
+import logo from '/logo.svg';
+import styles from './App.module.css';
+
+export default function App() {
+  const name = "$(name)";
+	return (
+    <div className="app">
+			<div className={styles.app__name}>{name}</div>
+      <header className={styles.header}>
+        <img src={logo} className={styles.logo} alt="logo" />
+        <p>Welcome to Ignite UI for React!</p>
+        <a className={styles.link}
+          href="https://www.infragistics.com/products/ignite-ui-react"
+          target="_blank"
+          rel="noopener noreferrer">
+          Learn More
+        </a>
+      </header>
+    </div>
+	)
+}

package/templates/react/igr-ts/projects/_base_with_home/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/projects/_base_with_home/index.d.ts

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

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

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

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/projects/empty/index.d.ts

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

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

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

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

@@ -0,0 +1,59 @@
+.app {
+	text-align: center;
+	display: flex;
+	flex-flow: column;
+	min-height: 100vh;
+  }
+  
+  .content {
+	flex: 1 0 auto;
+	padding: 1em;
+  }
+  
+  /* 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/igr-ts/projects/top-nav/files/src/App.tsx

@@ -0,0 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+import NavigationHeader from "./components/navigation-header/index";
+import { routes } from './routes';
+import "./App.css";
+
+export default function App() {
+	const name = "$(name)";
+	return (
+			<div className="app">
+        <div className="app__name">{name}</div>
+          <NavigationHeader routes={routes}></NavigationHeader>
+          <div className="content">
+            <Routes>
+              {routes.map((route, i) => (
+                <Route key={i} path={route.path} element={route.element} />
+              ))}
+            </Routes>
+          </div>
+			</div>
+	);
+}

package/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+
+export default function NavigationHeader({ routes }) {
+	const [state, setState] = useState({ activeItem: null });
+
+	function handleClick(index) {
+		setState({ activeItem: index });
+	}
+
+	useEffect(() => {
+		let currentRoute = window.location.href.split(window.location.origin)[1];
+		if (!currentRoute) {
+			currentRoute = '/'
+		}
+		const activeItem = routes.findIndex((route) => route.path === currentRoute);
+		setState({ activeItem });
+	}, [routes]);
+
+	return (
+		<nav>
+			<ul>
+				{routes.map(
+					(route, i) => <li key={i} className={state.activeItem === i ? 'active' : ''}><Link onClick={() => handleClick(i)} to={route.path}>{route.text}</Link></li>
+				)}
+			</ul>
+		</nav>
+	)
+}

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

@@ -0,0 +1,5 @@
+import Home from './views/home';
+
+export const routes = [
+  { path: '/', element: <Home />, text: 'Home' }
+];

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/projects/top-nav/files/src/views/home/index.tsx

@@ -0,0 +1,17 @@
+import logo from './logo.svg';
+import styles from './style.module.css';
+
+export default function Home() {
+	return (
+      <header className={styles.header}>
+        <img src={logo} className={styles.logo} alt="logo" />
+        <p>Welcome to Ignite UI for React!</p>
+        <a className={styles.link}
+          href="https://www.infragistics.com/products/ignite-ui-react"
+          target="_blank"
+          rel="noopener noreferrer">
+          Learn More
+        </a>
+      </header>
+	)
+}

package/templates/react/igr-ts/projects/top-nav/files/src/views/home/logo.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
+    <g fill="#61DAFB">
+        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
+        <circle cx="420.9" cy="296.5" r="45.7"/>
+        <path d="M520.5 78.1z"/>
+    </g>
+</svg>

package/templates/react/igr-ts/projects/top-nav/files/src/views/home/style.module.css

@@ -0,0 +1,27 @@
+:local(.logo) {
+  animation: App-logo-spin infinite 20s linear;
+  height: 40vmin;
+}
+
+:local(.header) {
+  padding-top: 5em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: #333;
+}
+
+:local(.link) {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/templates/react/igr-ts/projects/top-nav/index.d.ts

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

package/templates/react/igr-ts/projects/top-nav/index.js

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

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

@@ -0,0 +1,60 @@
+import { IgrRadialGaugeModule } from 'igniteui-react-gauges';
+import { IgrRadialGauge } from 'igniteui-react-gauges';
+import style from './style.module.css';
+
+IgrRadialGaugeModule.register();
+
+
+export default function $(ClassName)() {
+    const title = 'Radial 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/radialgauge.html">
+				official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.gauge}>
+					<IgrRadialGauge
+						backingShape="Fitted"
+						backingBrush="#fcfcfc"
+						backingOutline="DodgerBlue"
+						backingOversweep={5}
+						backingCornerRadius={10}
+						backingStrokeThickness={5}
+						backingOuterExtent={0.8}
+						backingInnerExtent={0.15}
+						scaleStartAngle={135} scaleEndAngle={45}
+						height="300px" width="50%"
+						minimumValue={0} value={50}
+						maximumValue={80} interval={10}>
+					</IgrRadialGauge>
+				</div>
+				<div className={style.gauge}>
+					<IgrRadialGauge
+						value={50}
+						isNeedleDraggingEnabled={true}
+						isNeedleDraggingConstrained={true}
+						needleShape="NeedleWithBulb"
+						needleBrush="DodgerBlue"
+						needleOutline="DodgerBlue"
+						needleEndExtent={0.475}
+						needleStrokeThickness={1}
+						needlePivotShape="CircleOverlay"
+						needlePivotBrush="#9f9fa0"
+						needlePivotOutline="#9f9fa0"
+						needlePivotWidthRatio={0.2}
+						needlePivotStrokeThickness={1}
+						height="300px" width="50%"
+						minimumValue={0}
+						maximumValue={80} interval={10}>
+					</IgrRadialGauge>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/radial-gauge/default/files/src/views/__path__/style.module.css

@@ -0,0 +1,12 @@
+:local(.container) {
+    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/radial-gauge/default/index.d.ts

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

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsRadialGaugeTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Radial Gauge"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "radial-gauge";
+        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.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@18.2.2-beta.0"];
+    }
+}
+module.exports = new IgrTsRadialGaugeTemplate();

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

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

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

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

package/templates/react/index.js

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