igniteui-cli 12.0.6 → 12.1.0-beta.1

package/lib/commands/new.js

@@ -107,7 +107,10 @@ command = {
                 }
             }
             const theme = projectLib.themes[themeIndex];
-            const projectTemplate = argv.template || projectLib.projectIds[0];
+            const indexOfEmptyOrFirst = projectLib.projectIds.indexOf("empty") !== -1 ?
+                projectLib.projectIds.indexOf("empty") :
+                0;
+            const projectTemplate = argv.template || projectLib.projectIds[indexOfEmptyOrFirst];
             cli_core_1.Util.log(`Project Name: ${argv.name}, framework ${argv.framework}, type ${projectLib.projectType}, theme ${theme}`);
             const projTemplate = projectLib.getProject(projectTemplate);
             if (projTemplate == null) {

package/lib/commands/start.js

@@ -81,12 +81,17 @@ command = {
                     break;
                 case "react":
                     if (port) {
-                        // https://facebook.github.io/create-react-app/docs/advanced-configuration
-                        // react-scripts start "--port=dafaultPort" is not a valid command for all environments.
-                        // .env file is included and used by both igr-es6 and es6 now,
-                        // to specify the port for all environments (Windows, Mac, etc)
-                        process.env.PORT = `${port}`;
-                        port = null;
+                        if (projectType === "igr-ts") {
+                            execSyncNpmStart(port, options);
+                        }
+                        else {
+                            // https://facebook.github.io/create-react-app/docs/advanced-configuration
+                            // react-scripts start "--port=dafaultPort" is not a valid command for all environments.
+                            // .env file is included and used by both igr-es6 and es6 now,
+                            // to specify the port for all environments (Windows, Mac, etc)
+                            process.env.PORT = `${port}`;
+                            port = null;
+                        }
                     }
                 /* falls through */
                 case "angular":

package/lib/templates/IgniteUIForReactTemplate.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IgniteUIForReactTemplate = void 0;
 const cli_core_1 = require("@igniteui/cli-core");
-const fs = require("fs-extra");
 const path = require("path");
+const ReactTypeScriptFileUpdate_1 = require("../../templates/react/ReactTypeScriptFileUpdate");
 class IgniteUIForReactTemplate {
     /**
      * Base ReactTemplate constructor
@@ -15,11 +15,10 @@ class IgniteUIForReactTemplate {
         this.listInCustomTemplates = false;
         this.dependencies = [];
         this.framework = "react";
-        this.projectType = "igr-es6";
         this.hasExtraConfiguration = false;
         this.packages = [];
         this.delimiters = cli_core_1.defaultDelimiters;
-        this.configFile = "./src/routes.json";
+        this.configFile = "./src/routes.tsx";
     }
     get templatePaths() {
         return [path.join(this.rootPath, "files")];
@@ -46,14 +45,9 @@ class IgniteUIForReactTemplate {
         if (options && options.skipRoute) {
             return;
         }
-        const configFile = fs.readFileSync(path.join(projectPath, this.configFile), "utf8");
-        const viewsArr = JSON.parse(configFile);
-        viewsArr.push({
-            componentPath: this.getViewLink(name),
-            path: "/" + this.folderName(cli_core_1.Util.nameFromPath(name)),
-            text: this.getToolbarLink(name)
-        });
-        fs.writeFileSync(path.join(projectPath, this.configFile), JSON.stringify(viewsArr, null, 4));
+        const routeModulePath = "src/routes.tsx";
+        const routingModule = new ReactTypeScriptFileUpdate_1.ReactTypeScriptFileUpdate(path.join(projectPath, routeModulePath));
+        routingModule.addRoute(path.join(projectPath, `src/views/${this.folderName(name)}`), cli_core_1.Util.lowerDashed(cli_core_1.Util.nameFromPath(name)), cli_core_1.Util.className(cli_core_1.Util.nameFromPath(name)), options.routerChildren, undefined);
     }
     getExtraConfiguration() {
         throw new Error("Method not implemented.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-cli",
-  "version": "12.0.6",
+  "version": "12.1.0-beta.1",
   "description": "CLI tool for creating Ignite UI projects",
   "keywords": [
     "CLI",
@@ -72,8 +72,8 @@
     "all": true
   },
   "dependencies": {
-    "@igniteui/angular-templates": "~16.0.1206",
-    "@igniteui/cli-core": "~12.0.6",
+    "@igniteui/angular-templates": "~16.0.1210-beta.1",
+    "@igniteui/cli-core": "~12.1.0-beta.1",
     "chalk": "^2.3.2",
     "fs-extra": "^3.0.1",
     "glob": "^7.1.2",

package/templates/react/ReactTypeScriptFileUpdate.d.ts

@@ -0,0 +1,52 @@
+import * as ts from "typescript";
+/**
+ * Apply various updates to typescript files using AST
+ */
+export declare class ReactTypeScriptFileUpdate {
+    private targetPath;
+    protected formatOptions: {
+        spaces: boolean;
+        indentSize: number;
+        singleQuotes: boolean;
+    };
+    private fileSystem;
+    private targetSource;
+    private importsMeta;
+    private requestedImports;
+    private createdStringLiterals;
+    /** Create updates for a file. Use `add<X>` methods to add transformations and `finalize` to apply and save them. */
+    constructor(targetPath: string);
+    /** Applies accumulated transforms, saves and formats the file */
+    finalize(): void;
+    addRoute(path: string, component: string, name: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    /** Initializes existing imports info, [re]sets import and `NgModule` edits */
+    protected initState(): void;
+    protected loadImportsMeta(): {
+        lastIndex: number;
+        modulePaths: any[];
+    };
+    protected addRouteModuleEntry(path: string, component: string, name: string, routerChildren: string, importAlias: string, routesVariable?: string): void;
+    protected requestImport(modulePath: string, routerAlias: string, componentName: string): void;
+    /** Add `import` statements not previously found in the file  */
+    protected addNewFileImports(): void;
+    protected createIdentifierImport(importPath: string, as: string, component: string): ts.ImportDeclaration;
+    /** Transformation to apply edits to existing named import declarations */
+    protected importsTransformer: ts.TransformerFactory<ts.Node>;
+    /** Format a TS source file, very TBD */
+    protected formatFile(filePath: string): void;
+    /**  Try and parse formatting from project `.editorconfig` / `tslint.json` */
+    protected readFormatConfigs(): void;
+    /**
+     * Apply formatting changes (position based) in reverse
+     * from https://github.com/Microsoft/TypeScript/issues/1651#issuecomment-69877863
+     */
+    private applyChanges;
+    /** Return source file formatting options */
+    private getFormattingOptions;
+    /** Get language service host, sloppily */
+    private getLanguageHost;
+    /** Convert a string or string array union to array. Splits strings as comma delimited */
+    private asArray;
+    private createVisitor;
+    private createRouteEntry;
+}

package/templates/react/ReactTypeScriptFileUpdate.js

@@ -0,0 +1,344 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactTypeScriptFileUpdate = void 0;
+const cli_core_1 = require("@igniteui/cli-core");
+const ts = require("typescript");
+const DEFAULT_ROUTES_VARIABLE = "routes";
+/**
+ * Apply various updates to typescript files using AST
+ */
+class ReactTypeScriptFileUpdate {
+    /** Create updates for a file. Use `add<X>` methods to add transformations and `finalize` to apply and save them. */
+    constructor(targetPath) {
+        this.targetPath = targetPath;
+        this.formatOptions = { spaces: false, indentSize: 4, singleQuotes: false };
+        //#region ts.TransformerFactory
+        /** Transformation to apply edits to existing named import declarations */
+        this.importsTransformer = (context) => (rootNode) => {
+            const editImports = this.requestedImports.filter(x => x.edit);
+            // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171
+            const visitor = (node) => {
+                if (node.kind === ts.SyntaxKind.ImportDeclaration &&
+                    editImports.find(x => x.from === node.moduleSpecifier.text)) {
+                    // visit just the source file main array (second visit)
+                    return visitImport(node);
+                }
+                else {
+                    node = ts.visitEachChild(node, visitor, context);
+                }
+                return node;
+            };
+            function visitImport(node) {
+                node = ts.visitEachChild(node, visitImport, context);
+                return node;
+            }
+            return ts.visitNode(rootNode, visitor);
+        };
+        this.fileSystem = cli_core_1.App.container.get(cli_core_1.FS_TOKEN);
+        this.initState();
+    }
+    /** Applies accumulated transforms, saves and formats the file */
+    finalize() {
+        // add new import statements after visitor walks:
+        this.addNewFileImports();
+        cli_core_1.TypeScriptUtils.saveFile(this.targetPath, this.targetSource);
+        this.formatFile(this.targetPath);
+        // reset state in case of further updates
+        this.initState();
+    }
+    addRoute(path, component, name, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        this.addRouteModuleEntry(path, component, name, routerChildren, importAlias, routesVariable);
+    }
+    //#region File state
+    /** Initializes existing imports info, [re]sets import and `NgModule` edits */
+    initState() {
+        this.targetSource = cli_core_1.TypeScriptUtils.getFileSource(this.targetPath);
+        this.importsMeta = this.loadImportsMeta();
+        this.requestedImports = [];
+        this.createdStringLiterals = [];
+    }
+    /* load some metadata about imports */
+    loadImportsMeta() {
+        const meta = { lastIndex: 0, modulePaths: [] };
+        for (let i = 0; i < this.targetSource.statements.length; i++) {
+            const statement = this.targetSource.statements[i];
+            switch (statement.kind) {
+                case ts.SyntaxKind.ImportDeclaration:
+                    const importStmt = statement;
+                    if (importStmt.importClause && importStmt.importClause.namedBindings &&
+                        importStmt.importClause.namedBindings.kind !== ts.SyntaxKind.NamespaceImport) {
+                        // don't add imports without named (e.g. `import $ from "JQuery"` or `import "./my-module.js";`)
+                        // don't add namespace imports (`import * as fs`) as available for editing, maybe in the future
+                        meta.modulePaths.push(importStmt.moduleSpecifier.text);
+                    }
+                // don't add equals imports (`import url = require("url")`) as available for editing, maybe in the future
+                case ts.SyntaxKind.ImportEqualsDeclaration:
+                    meta.lastIndex = i + 1;
+                    break;
+                default:
+                    break;
+            }
+        }
+        return meta;
+    }
+    //#endregion File state
+    addRouteModuleEntry(path, component, name, routerChildren, importAlias, routesVariable = DEFAULT_ROUTES_VARIABLE) {
+        const isRouting = path.indexOf("routing") >= 0;
+        if (isRouting && this.targetSource.text.indexOf(path.slice(0, -3)) > 0) {
+            return;
+        }
+        const moduleName = path.substring(0, path.indexOf("-routing"));
+        if (path) {
+            const relativePath = isRouting ?
+                "./views/" + moduleName + "/" + path.slice(0, -3) : cli_core_1.Util.relativePath(this.targetPath, path, true, true);
+            this.requestImport(relativePath, importAlias, name);
+        }
+        // https://github.com/Microsoft/TypeScript/issues/14419#issuecomment-307256171
+        const transformer = (context) => (rootNode) => {
+            // the visitor that should be used when adding routes to the main route array
+            const conditionalVisitor = (node) => {
+                if (node.kind === ts.SyntaxKind.ArrayLiteralExpression) {
+                    const newObject = this.createRouteEntry(component, name, routerChildren);
+                    const array = node;
+                    this.createdStringLiterals.push(path, name);
+                    const notFoundWildCard = ".*";
+                    const nodes = ts.visitNodes(array.elements, visitor);
+                    const errorRouteNode = nodes.filter(element => element.getText().includes(notFoundWildCard))[0];
+                    let resultNodes = null;
+                    if (errorRouteNode) {
+                        resultNodes = nodes
+                            .slice(0, nodes.indexOf(errorRouteNode))
+                            .concat(newObject)
+                            .concat(errorRouteNode);
+                    }
+                    else {
+                        resultNodes = nodes
+                            .concat(newObject);
+                    }
+                    const elements = ts.factory.createNodeArray([
+                        ...resultNodes
+                    ]);
+                    return ts.factory.updateArrayLiteralExpression(array, elements);
+                }
+                else {
+                    return ts.visitEachChild(node, conditionalVisitor, context);
+                }
+            };
+            let visitCondition;
+            if (!isRouting) {
+                visitCondition = (node) => {
+                    return node.kind === ts.SyntaxKind.VariableDeclaration &&
+                        node.name.getText() === routesVariable;
+                    // no type currently
+                    //(node as ts.VariableDeclaration).type.getText() === "Route[]";
+                };
+            }
+            else {
+                visitCondition = (node) => {
+                    return undefined;
+                };
+            }
+            const visitor = this.createVisitor(conditionalVisitor, visitCondition, context);
+            context.enableSubstitution(ts.SyntaxKind.ClassDeclaration);
+            return ts.visitNode(rootNode, visitor);
+        };
+        this.targetSource = ts.transform(this.targetSource, [transformer], {
+            pretty: true // oh well..
+        }).transformed[0];
+        this.finalize();
+    }
+    requestImport(modulePath, routerAlias, componentName) {
+        const existing = this.requestedImports.find(x => x.from === modulePath);
+        if (!existing) {
+            // new imports, check if already exists in file
+            this.requestedImports.push({
+                as: routerAlias,
+                from: modulePath,
+                component: componentName,
+                edit: this.importsMeta.modulePaths.indexOf(modulePath) !== -1
+            });
+        }
+        else {
+            return;
+        }
+    }
+    /** Add `import` statements not previously found in the file  */
+    addNewFileImports() {
+        const newImports = this.requestedImports.filter(x => !x.edit);
+        if (!newImports.length) {
+            return;
+        }
+        const newStatements = ts.factory.createNodeArray([
+            ...this.targetSource.statements.slice(0, this.importsMeta.lastIndex),
+            ...newImports.map(x => this.createIdentifierImport(x.from, x.as, x.component)),
+            ...this.targetSource.statements.slice(this.importsMeta.lastIndex)
+        ]);
+        newImports.forEach(x => this.createdStringLiterals.push(x.from));
+        this.targetSource = ts.factory.updateSourceFile(this.targetSource, newStatements);
+    }
+    createIdentifierImport(importPath, as, component) {
+        let exportedObject;
+        let exportedObjectName;
+        let importClause;
+        if (as) {
+            exportedObject = "routes";
+            exportedObjectName = as.replace(/\s/g, "");
+            importClause = ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+                ts.factory.createImportSpecifier(false, ts.factory.createIdentifier(exportedObject), ts.factory.createIdentifier(exportedObjectName))
+            ]));
+        }
+        else {
+            importClause = ts.factory.createImportClause(false, ts.factory.createIdentifier(component), undefined);
+        }
+        const importDeclaration = ts.factory.createImportDeclaration(undefined, undefined, importClause, ts.factory.createStringLiteral(importPath, true));
+        return importDeclaration;
+    }
+    //#endregion ts.TransformerFactory
+    //#region Formatting
+    /** Format a TS source file, very TBD */
+    formatFile(filePath) {
+        // formatting via LanguageService https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API
+        // https://github.com/Microsoft/TypeScript/issues/1651
+        let text = this.fileSystem.readFile(filePath);
+        // create the language service files
+        const services = ts.createLanguageService(this.getLanguageHost(filePath), ts.createDocumentRegistry());
+        this.readFormatConfigs();
+        const textChanges = services.getFormattingEditsForDocument(filePath, this.getFormattingOptions());
+        text = this.applyChanges(text, textChanges);
+        if (this.formatOptions.singleQuotes) {
+            for (const str of this.createdStringLiterals) {
+                // there shouldn't be duplicate strings of these
+                text = text.replace(`"${str}"`, `'${str}'`);
+            }
+        }
+        this.fileSystem.writeFile(filePath, text);
+    }
+    /**  Try and parse formatting from project `.editorconfig` / `tslint.json` */
+    readFormatConfigs() {
+        if (this.fileSystem.fileExists(".editorconfig")) {
+            // very basic parsing support
+            const text = this.fileSystem.readFile(".editorconfig", "utf-8");
+            const options = text
+                .replace(/\s*[#;].*([\r\n])/g, "$1") //remove comments
+                .replace(/\[(?!\*\]|\*.ts).+\][^\[]+/g, "") // leave [*]/[*.ts] sections
+                .split(/\r\n|\r|\n/)
+                .reduce((obj, x) => {
+                if (x.indexOf("=") !== -1) {
+                    const pair = x.split("=");
+                    obj[pair[0].trim()] = pair[1].trim();
+                }
+                return obj;
+            }, {});
+            this.formatOptions.spaces = options["indent_style"] === "space";
+            if (options["indent_size"]) {
+                this.formatOptions.indentSize = parseInt(options["indent_size"], 10) || this.formatOptions.indentSize;
+            }
+            if (options["quote_type"]) {
+                this.formatOptions.singleQuotes = options["quote_type"] === "single";
+            }
+        }
+        if (this.fileSystem.fileExists("tslint.json")) {
+            // tslint prio - overrides other settings
+            const options = JSON.parse(this.fileSystem.readFile("tslint.json", "utf-8"));
+            if (options.rules && options.rules.indent && options.rules.indent[0]) {
+                this.formatOptions.spaces = options.rules.indent[1] === "spaces";
+                if (options.rules.indent[2]) {
+                    this.formatOptions.indentSize = parseInt(options.rules.indent[2], 10);
+                }
+            }
+            if (options.rules && options.rules.quotemark && options.rules.quotemark[0]) {
+                this.formatOptions.singleQuotes = options.rules.quotemark.indexOf("single") !== -1;
+            }
+        }
+    }
+    /**
+     * Apply formatting changes (position based) in reverse
+     * from https://github.com/Microsoft/TypeScript/issues/1651#issuecomment-69877863
+     */
+    applyChanges(orig, changes) {
+        let result = orig;
+        for (let i = changes.length - 1; i >= 0; i--) {
+            const change = changes[i];
+            const head = result.slice(0, change.span.start);
+            const tail = result.slice(change.span.start + change.span.length);
+            result = head + change.newText + tail;
+        }
+        return result;
+    }
+    /** Return source file formatting options */
+    getFormattingOptions() {
+        const formatOptions = {
+            // tslint:disable:object-literal-sort-keys
+            indentSize: this.formatOptions.indentSize,
+            tabSize: 4,
+            newLineCharacter: ts.sys.newLine,
+            convertTabsToSpaces: this.formatOptions.spaces,
+            indentStyle: ts.IndentStyle.Smart,
+            insertSpaceAfterCommaDelimiter: true,
+            insertSpaceAfterSemicolonInForStatements: true,
+            insertSpaceBeforeAndAfterBinaryOperators: true,
+            insertSpaceAfterKeywordsInControlFlowStatements: true,
+            insertSpaceAfterTypeAssertion: true
+            // tslint:enable:object-literal-sort-keys
+        };
+        return formatOptions;
+    }
+    /** Get language service host, sloppily */
+    getLanguageHost(filePath) {
+        const files = {};
+        files[filePath] = { version: 0 };
+        // create the language service host to allow the LS to communicate with the host
+        const servicesHost = {
+            getCompilationSettings: () => ({}),
+            getScriptFileNames: () => Object.keys(files),
+            getScriptVersion: fileName => files[fileName] && files[fileName].version.toString(),
+            getScriptSnapshot: fileName => {
+                if (!this.fileSystem.fileExists(fileName)) {
+                    return undefined;
+                }
+                return ts.ScriptSnapshot.fromString(this.fileSystem.readFile(fileName));
+            },
+            getCurrentDirectory: () => process.cwd(),
+            getDefaultLibFileName: options => ts.getDefaultLibFilePath(options),
+            readDirectory: ts.sys.readDirectory,
+            readFile: ts.sys.readFile,
+            fileExists: ts.sys.fileExists
+        };
+        return servicesHost;
+    }
+    //#endregion Formatting
+    /** Convert a string or string array union to array. Splits strings as comma delimited */
+    asArray(value, variables) {
+        let result = [];
+        if (value) {
+            result = typeof value === "string" ? value.split(/\s*,\s*/) : value;
+            result = result.map(x => cli_core_1.Util.applyConfigTransformation(x, variables));
+        }
+        return result;
+    }
+    createVisitor(conditionalVisitor, visitCondition, nodeContext) {
+        return function visitor(node) {
+            if (visitCondition(node)) {
+                node = ts.visitEachChild(node, conditionalVisitor, nodeContext);
+            }
+            else {
+                node = ts.visitEachChild(node, visitor, nodeContext);
+            }
+            return node;
+        };
+    }
+    createRouteEntry(className, linkText, routerAlias) {
+        const routePath = ts.factory.createPropertyAssignment("path", ts.factory.createStringLiteral(className, true));
+        const jsxElement = ts.factory.createJsxSelfClosingElement(ts.factory.createIdentifier(linkText), [], undefined);
+        const routeComponent = ts.factory.createPropertyAssignment("element", jsxElement);
+        const routeData = ts.factory.createPropertyAssignment("text", ts.factory.createStringLiteral(linkText, true));
+        if (routerAlias) {
+            const childrenData = ts.factory.createPropertyAssignment("children", ts.factory.createIdentifier(routerAlias));
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData, childrenData]);
+        }
+        else {
+            return ts.factory.createObjectLiteralExpression([routePath, routeComponent, routeData]);
+        }
+    }
+}
+exports.ReactTypeScriptFileUpdate = ReactTypeScriptFileUpdate;

package/templates/react/igr-es6/index.js

@@ -4,7 +4,7 @@ const cli_core_1 = require("@igniteui/cli-core");
 class IgrReactProjectLibrary extends cli_core_1.BaseProjectLibrary {
     constructor() {
         super(__dirname);
-        this.name = "Ignite UI for React";
+        this.name = "Ignite UI for React (deprecated)";
         this.projectType = "igr-es6";
         this.themes = ["default"];
         const groups = require("./groups.json");

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

@@ -0,0 +1,56 @@
+import { IgrBulletGraphModule } from 'igniteui-react-gauges';
+import { IgrBulletGraph } from 'igniteui-react-gauges';
+import style from './style.module.css';
+
+IgrBulletGraphModule.register();
+
+
+export default function $(ClassName)() {
+    const title = 'Bullet Graph';
+
+    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/bulletgraph.html">
+					official documentation page
+				</a>
+			</div>
+			<div className={style.container}>
+				<div className={style.graph}>
+					<IgrBulletGraph
+						height="80px" width="400px"
+						minimumValue={0} value={70} interval={10}
+						maximumValue={100} targetValue={90}
+						isScaleInverted={false}
+						scaleBackgroundBrush="DodgerBlue"
+						scaleBackgroundOutline="DarkViolet"
+						scaleBackgroundThickness={2}
+						scaleStartExtent={0.05}
+						scaleEndExtent={0.95}>
+					</IgrBulletGraph>
+				</div>
+				<div className={style.graph}>
+					<IgrBulletGraph
+						value={50}
+						valueBrush="DodgerBlue"
+						valueStrokeThickness={1}
+						valueInnerExtent={0.5}
+						valueOuterExtent={0.65}
+						targetValue={80}
+						targetValueBreadth={10}
+						targetValueBrush="LimeGreen"
+						targetValueOutline="LimeGreen"
+						targetValueStrokeThickness={1}
+						targetValueInnerExtent={0.3}
+						targetValueOuterExtent={0.85}
+						height="80px" width="400px"
+						minimumValue={0}
+						maximumValue={100}>
+					</IgrBulletGraph>
+				</div>
+			</div>
+		</div>
+	)
+}

package/templates/react/igr-ts/bullet-graph/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(.graph) {
+    width: 50%;
+}

package/templates/react/igr-ts/bullet-graph/default/index.d.ts

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

package/templates/react/igr-ts/bullet-graph/default/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const IgniteUIForReactTemplate_1 = require("../../../../../lib/templates/IgniteUIForReactTemplate");
+class IgrTsBulletGraphTemplate extends IgniteUIForReactTemplate_1.IgniteUIForReactTemplate {
+    constructor() {
+        super(__dirname);
+        this.components = ["Bullet Graph"];
+        this.controlGroup = "Gauges";
+        this.listInComponentTemplates = true;
+        this.id = "bullet-graph";
+        this.projectType = "igr-ts";
+        this.name = "Bullet Graph";
+        this.description = `allows for a linear and concise view of measures compared against a scale.`;
+        // TODO: read version from igniteui-react-core in package.json
+        this.packages = ["igniteui-react-gauges@18.2.2-beta.0"];
+    }
+}
+module.exports = new IgrTsBulletGraphTemplate();

package/templates/react/igr-ts/bullet-graph/index.d.ts

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

package/templates/react/igr-ts/bullet-graph/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cli_core_1 = require("@igniteui/cli-core");
+class IgrTsBulletGraphComponent extends cli_core_1.BaseComponent {
+    /**
+     *
+     */
+    constructor() {
+        super(__dirname);
+        this.name = "Bullet Graph";
+        this.group = "Gauges";
+        this.description = `allows for a linear and concise view of measures compared against a scale.`;
+    }
+}
+module.exports = new IgrTsBulletGraphComponent();

package/templates/react/igr-ts/category-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();
+});