igniteui-cli 13.0.2 → 13.1.0-beta.2

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

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

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

@@ -0,0 +1,24 @@
+import logo from "/logo.svg";
+import styles from "./style.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/app/home/style.module.css

@@ -0,0 +1,36 @@
+: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;
+}
+
+:local(.app__name) {
+  padding-top: 1em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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 with routing";
+        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 and routing";
+        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/app.css

@@ -0,0 +1,62 @@
+.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/app.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from "react-router-dom";
+import { routes } from './app-routes';
+import NavigationHeader from "../components/navigation-header";
+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">
+				<Outlet />
+			</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/index.d.ts

@@ -0,0 +1,14 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { BaseWithHomeIgrTsProject } from "../_base_with_home";
+export declare class TopNavIgrTsProject extends BaseWithHomeIgrTsProject 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_with_home_1 = require("../_base_with_home");
+class TopNavIgrTsProject extends _base_with_home_1.BaseWithHomeIgrTsProject {
+    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/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/radial-gauge/default/files/src/app/__path__/__filePrefix__.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/app/__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.3.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();