Add groupPriority to sort components within a group

lib/BaseComponent.ts

@@ -5,6 +5,7 @@ export class BaseComponent implements Component {
 	public templates: Template[];
 	public name: string;
 	public group: string;
+	public groupPriority = 0;
 	private basePath: string = __dirname;
 
 	/**

lib/BaseProjectLibrary.ts

@@ -99,6 +99,7 @@ export class BaseProjectLibrary implements ProjectLibrary {
 
 				const component: Component = {
 					group: template.controlGroup,
+					groupPriority: 0,
 					name: newComponent,
 					templates: []
 				};
@@ -145,7 +146,9 @@ export class BaseProjectLibrary implements ProjectLibrary {
 	}
 
 	public getComponentNamesByGroup(group: string): string[] {
-		return this.components.filter(x => x.group === group).map(x => x.name);
+		return this.components.filter(x => x.group === group)
+			.sort((a, b) => b.groupPriority - a.groupPriority)
+			.map(x => x.name);
 	}
 
 	/**

lib/MultiTemplateComponent.ts

@@ -1,6 +1,7 @@
 export abstract class MultiTemplateComponent<T extends Template> implements Component {
 	public name: string;
 	public group: string;
+	public groupPriority = 0;
 
 	get templates(): T[] {
 		// TODO: prop-full

lib/PromptSession.ts

@@ -159,6 +159,10 @@ export class PromptSession {
 				newArray.push(new inquirer.Separator());
 			}
 		}
+		if (array.length > 4) {
+			// additional separator after last item for lists that wrap around
+			newArray.push(new inquirer.Separator(new Array(15).join("=")));
+		}
 		return newArray;
 	}
 
@@ -209,7 +213,7 @@ export class PromptSession {
 			const groups = projectLibrary.getComponentGroups();
 			const groupRes: string = await this.getUserInput({
 				choices: groups,
-				default: groups.find(x => x === "Data Grids") || groups[0],
+				default: groups.find(x => x.includes("Grids")) || groups[0],
 				message: "Choose a group:",
 				name: "componentGroup",
 				type: "list"

lib/types/Component.d.ts

@@ -2,10 +2,15 @@
  * A set of Templates for a common component
  */
 interface Component {
-	/** Name of the parent group, e.g. Data Visualization */
-	group: string;
 	/** Component name, e.g. Pie Chart or Grid  */
 	name: string;
+	/** Name of the parent group, e.g. Data Visualization */
+	group: string;
+	/**
+	 * Controls the position of the component within the group.
+	 * Step by step mode lists components with higher values first.
+	 */
+	groupPriority: number;
 
 	templates: Template[];
 }

spec/unit/BaseProjectLibrary-spec.ts

@@ -273,6 +273,24 @@ describe("Unit - Base project library ", () => {
 		done();
 	});
 
+	it("should sort component in a group based on priority", async done => {
+		spyOnProperty(BaseProjectLibrary.prototype, "components").and.returnValue([
+			{ name: "Component1", group: "commonGroup", groupPriority: 1 },
+			{ name: "Component2", group: "commonGroup", groupPriority: 20 },
+			{ name: "Component3", group: "commonGroup", groupPriority: 13 },
+			{ name: "Component4", group: "commonGroup", groupPriority: 4 },
+			{ name: "Component5", group: "commonGroup", groupPriority: -4 },
+			{ name: "Component6", group: "commonGroup", groupPriority: 0 },
+			{ name: "Component7", group: "commonGroup", groupPriority: 0 }
+		] as Component[]);
+
+		const library = new BaseProjectLibrary(__dirname);
+		expect(library.getComponentNamesByGroup("commonGroup")).toEqual(
+			["Component2", "Component3", "Component4", "Component1", "Component6", "Component7", "Component5"]
+		);
+		done();
+	});
+
 	it("gets correct project", async done => {
 		spyOn(Util, "getDirectoryNames").and.returnValues(["chart", "combo", "grid"]);
 

templates/angular/igx-ts/grid/index.ts

@@ -9,6 +9,7 @@ class IgxGridComponent extends BaseComponent {
 		super(__dirname);
 		this.name  = "Grid";
 		this.group = "Grids & Lists";
+		this.groupPriority = 10;
 	}
 }
 module.exports = new IgxGridComponent();