igniteui-cli 12.0.6 → 12.1.0-beta.0

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

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

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

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/react/igr-ts/projects/_base/files/vite.config.ts

@@ -0,0 +1,20 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	define: process.env.VITEST ? {} : { global: 'window' },
+	plugins: [react()],
+	test: {
+		globals: true,
+		environment: 'jsdom',
+		setupFiles: ['./src/setupTests.ts'],
+		deps: {
+			inline: ['vitest-canvas-mock'],
+		},
+	},
+	resolve: {
+		mainFields: ['module'],
+	}
+})

package/templates/react/igr-ts/projects/_base/index.d.ts

@@ -0,0 +1,29 @@
+import { ControlExtraConfiguration, ProjectTemplate } from "@igniteui/cli-core";
+export declare class BaseIgrTsProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    framework: string;
+    projectType: string;
+    dependencies: string[];
+    hasExtraConfiguration: boolean;
+    delimiters: import("@igniteui/cli-core").TemplateDelimiters;
+    get templatePaths(): string[];
+    generateConfig(name: string, theme: string, ...options: any[]): {
+        [key: string]: any;
+    };
+    installModules(): void;
+    upgradeIgniteUIPackages(projectPath: string, packagePath: string): Promise<boolean>;
+    getExtraConfiguration(): ControlExtraConfiguration[];
+    setExtraConfiguration(extraConfigKeys: {}): void;
+    protected getVariablesConfig(name: string, theme: string): {
+        name: string;
+        theme: string;
+        cliVersion: string;
+        "dash-name": string;
+        description: string;
+        dot: string;
+        path: string;
+        projectTemplate: string;
+    };
+}

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

@@ -0,0 +1,58 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseIgrTsProject = void 0;
+const cli_core_1 = require("@igniteui/cli-core");
+const path = require("path");
+class BaseIgrTsProject {
+    constructor() {
+        this.id = "base";
+        this.name = "base";
+        this.description = "Ignite UI CLI project for React";
+        this.framework = "react";
+        this.projectType = "tsx";
+        this.hasExtraConfiguration = false;
+        this.delimiters = cli_core_1.defaultDelimiters;
+    }
+    get templatePaths() {
+        return [path.join(__dirname, "files")];
+    }
+    generateConfig(name, theme, ...options) {
+        return this.getVariablesConfig(name, theme);
+    }
+    installModules() {
+        throw new Error("Method not implemented.");
+    }
+    upgradeIgniteUIPackages(projectPath, packagePath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Method not implemented.");
+        });
+    }
+    getExtraConfiguration() {
+        throw new Error("Method not implemented.");
+    }
+    setExtraConfiguration(extraConfigKeys) {
+        throw new Error("Method not implemented.");
+    }
+    getVariablesConfig(name, theme) {
+        return {
+            name,
+            theme,
+            "cliVersion": cli_core_1.Util.version(),
+            "dash-name": cli_core_1.Util.lowerDashed(name),
+            "description": this.description,
+            "dot": ".",
+            "path": name,
+            "projectTemplate": this.id
+        };
+    }
+}
+exports.BaseIgrTsProject = BaseIgrTsProject;

package/templates/react/igr-ts/projects/_base_with_home/files/public/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/_base_with_home/files/src/App.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/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_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,31 @@
+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";
+
+export default function App() {
+	const name = "$(name)";	
+	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>
+	);	
+}

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 { NavLink } 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' : ''}><NavLink onClick={() => handleClick(i)} exact to={route.path}>{route.text}</NavLink></li>
+				)}
+			</ul>
+		</nav>
+	)
+}

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

@@ -0,0 +1,50 @@
+import { 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/top-nav/files/src/routes.json

@@ -0,0 +1,7 @@
+[
+  {
+    "path": "/",
+    "componentPath": "./views/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();
+});