igniteui/igniteui-cli

Ignite UI Command-Line Interface by Infragistics

Ignite UI CLI

Quickly create projects including Ignite UI for Angular and Ignite UI for jQuery components for a variety of frameworks.

Overview

Features:

• Create project structure
• Add views with Ignite UI components (e.g. Combo, Grid or Chart)
• Add scenario based templates with multiple components (e.g. a dashboard)
• Build and install npm packages
• Select a theme, support for custom themes coming soon
• Step by step guide

Supported frameworks

• jQuery
• Angular
• React

Prerequisites

The repository houses multiple packages and orchestrates building and publishing them with lerna and yarn workspaces.

In order to build the repository locally, you need to have yarn installed on your machine. For installation instructions, please visit their official page

Packages

This monorepo contains several packages that combine into the igniteui-cli:

Package	Description	Location
@igniteui/cli-core	Contains the core functionality of the cli tool	packages/core
@igniteui/angular-templates	Contains the template definitions for Angular components	packages/igx-templates
@igniteui/angular-schematics	IgniteUI CLI implementation to be used with Angular CLI's schematics engine	packages/ng-schematics
igniteui-cli	Standalone IgniteUI CLI tool for React, jQuery and Angular	packages/cli

Table of Contents

• Installation
• Usage
  • Step by step
  • List available commands
  • Generating Projects and adding components
    • Generate Ignite UI for Angular project
    • Generate Ignite UI for React project
    • Adding components
  • Build and run
• Schematics
  • Schematic Definitions
• Contribution

Installation

Install the npm package as a global module:

npm install -g igniteui-cli

Usage

The main entry point is igniteui and is also aliased as ig. Both can be used interchangeably to call available commands. Check out our Wiki documentation for more details.

Step by step

To get a guided experience through the available options, simply run:

ig

Upon creation, project will be automatically loaded in the default browser. NOTE: If that doesn't happen the port may be already in use. Ports vary for different project types, see the description for the ig start command for details on default ports.

List the available commands.

ig help

Generating projects and adding components

Create a new project passing name, framework and style theme.

ig new <project name> --framework=<framework> --type=<proj-type> --theme=<theme>

This will create the project and will install the needed dependencies.

Parameters besides name are optional. Framework default to "jquery", project type defaults to the first available in the framework and theme to the first available for the project. For more information visit ig new Wiki page.

Generate Ignite UI for Angular project

To create a new project with Ignite UI for Angular use ig new by specifying angular as framework, and optionally igx-ts as project type and selecting one of the project templates:

ig new "IG Project" --framework=angular --type=igx-ts --template=side-nav

Generate Ignite UI for React project

To create a new project with Ignite UI for React use ig new by specifying react as framework and igr-es6 as project type:

ig new "IG Project" --framework=react --type=igr-es6

Generate Ignite UI for Web Components project

To create a new project with Ignite UI for Web Components use ig new by specifying webcomponents as framework:

ig new "IG Project" --framework=webcomponents

Adding components

Once you have created a project, at any point you can add additional component templates using ig add. Running the command without parameters will guide you through the available templates:

ig add

Add a new component or template to the project passing component ID and choosing a name.

ig add <component/template> <component_name>

The ID matches either a component ("grid", "combo", "text-editor", etc) or a predefined template. Predefined templates are framework/project specific and can provide predefined views with either multiple components or fulfilling a specific use case like "form-validation", "master-detail" and so on.

For full list of supported templates in the current project you can simply run ig list command:

ig list

Build and run

ig build
ig start

Schematics

You can also add Ignite UI for Angular components to your projects by using the igniteui/angular-schematics package. It included schematic definitions for most of the logic present in the igniteui-cli. These can be called in any existing Angular project or even when creating one. You can learn more about the schematics package on from its readme.

Contribution

See the Contribution guide to get started.

Run locally

1. Clone the repository

2. Install dependencies with yarn install

3. To build the packages, run yarn build in the project root.

4. Open in Visual Studio Code

   There is a predefined launch.config file for VS Code in the root folder, so you can use VS Code View/Debug window and choose one of the predefined actions. These include launching the step by step guide, quickstart project, create new project for a particular framework or add components.

5. Hit Start Debugging/F5

Data Collection

The Ignite UI CLI tool uses Google Analytics to anonymously report feature usage statistics and basic crash reports. This data is used to help improve the Ignite UI CLI tools over time. You can opt out of analytics before any data is sent by using

ig config set disableAnalytics true -g

when using the CLI. You can read Infragistics privacy policy at https://www.infragistics.com/legal/privacy.

igniteui-cli's Issues

Implement TreeGrid Basic template

Features: Sorting, Filtering and Row Selection(overview sample)

Implement Directory Browsing TreeGrid template

Theming support

• Add iOS and bootstrap themes (latter strings be like bootstrap3/default)
• Unify theme choices across projects

As there are structure changes in 17.2, some parts of this might need to wait for the new package and #64.

Custom themes:
Currently only the jQuery project has a semi-functional solution that'll bring the selected theme files(less source incl.) into the project structure and set it in the config. I think it still need a structure update to provide an additional file that @imports the theme to allow for easy overrides. That also means a build task should run less/sass if needed.

• Finish jQuery implementation - per above, plus properly apply themePath to templates
• React implementation
• Angular implementation

Step by step entry points

Besides the igniteui command without arguments, the same should be possible via:

• igniteui new: Also starts the guide from project creation
• igniteui add: Starts directly at the Add component/template step

Question: Should the add version also loop like it would after creating project to allow adding multiple views?

Add command args update

Arguments have a different format that what's described in the readme.
Ensure the following matches exactly:

ignite-ui add <component/template> <name>

Note, per yargs setup <arg> means required and should be reflected in the behavior of the command.

Implement TreeGrid Export template

• Features: Summaries, Hiding

Simplified ER Dashboard Template

Heavily simplified https://www.infragistics.com/resources/sample-applications/angular-er-dashboard

Implement Basic Grid template

Implement Column Chart template

Implement Input Forms template

Update the README

Add steps in the README on how to run the project locally.

Also add npm, build and coverage badges.

Related #1

Implement Financial Chart template

Implement Pie Chart template

Update readme.md

Add a command to list available templates

Since the number of templates has grow quite a bit, it won't be reasonable to list them in readme/docs.
It'll be better if there's a command that can list all available templates, filtered by framework [and project].

Implement Radial Chart template

Add Ignite UI package upgrade handling for Angular project

Implement TreeGrid Custom template

 Sorting
 Selection + Row Selection
 Updating
 Filtering
 Column moving
 Column Resizing
 Hiding

Add doc command

Add a ignite-ui <search term> command that would open the Online help search for the defined term.

Ignite UI 17.2 packages update

As there are structural changes made for 17.2's npm packages, we'll have to do the following updates:

• Update CLI functionality to use en/ja folders when using the full version package only
• Ensure all project templates are updated to the new version

Implement Basic HierarchicalGrid template

Features: Sorting, Filtering, Paging

Implement Grid Templating Template

o   Grid + Templating - Conditional templating

Master Detail Custom Template

v  Master Detail like http://igniteui.github.io/igniteui-angular/samples/grid/master-detail/index.html

Implement Bar Chart template

Create NPM package

Create an NPM package and setup NPM deployment as part of the build on tag builds.

Add config command

Add ignite-ui config command that can set and properly handle some configuration options.
Functionality for global defaults and -g flag would also be nice to have.

Add test command

Add ignite-ui test command that can be run on created projects.
This also means each project would need the appropriate setup and basic test templates should be added with each view.

Implement TreeGrid Editing template

• Features: Updating, Sorting, Filtering

Implement HierarchicalGrid Editing template

Features: Updating, Sorting, Filtering

Implement Directory Browsing Custom Template

v  Directory browsing sample for the Tree Grid

Implement Grid + Editing Template

o Grid + Editing – Features: Updating, Sorting, Filtering

Simplified ER Dashboard Template

Heavily simplified https://www.infragistics.com/resources/sample-applications/angular-er-dashboard

Implement Line Chart template

Implement Radial Chart template

Master Detail Custom Template

Master Detail like http://igniteui.github.io/igniteui-angularjs/samples/grid/master-detail/index.html

Implement Custom Grid template

o Custom Grid:
 Sorting
 Selection + Row Selection
 Updating
 Filtering
 Column moving
 Summaries
 Column Resizing
 Hiding

Implement HierarchicalGrid Export template

• Features: Summaries, Hiding

Implement Dashboard template

 DashBoard http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/data-chart/bind-data-chart-with-ko/

Implement HierarchicalGrid Custom template

 Sorting
 Selection + Row Selection
 Updating
 Filtering
 Column moving
 Column Resizing
 Hiding

Implement Grid + Templating Template

o Grid + Templating - Conditional templating

Implement Master Detail template

 Master Detail like http://igniteui.github.io/igniteui-angularjs/samples/grid/master-detail/index.html


Implement Doughnut Chart template

Implement Funnel Chart template

Implement Editors templates

o Text editor
o Numeric
o Currency Editor
o Mask Editor
o DatePicker

Implement Input Forms Custom Template

v  Input Forms - https://www.igniteui.com/editors/credit

Implement Combo template

CI Build

Create a CI build, which runs static code analysis, tests, reports coverage.

Implement Custom Template - Dashboard (Full)

v  DashBoard http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/data-chart/bind-data-chart-with-ko/

Ignite UI for Angular templates - Research

Description

Integrate the Ignite UI CLI with the Ignite UI for Angular product.

For the proof-of-concept the following steps will likely be required:

• Empty project template with Ignite UI for Angular package in place and imported modules
• One control view
• Routing setup?

Implement Grid + Export Template

o Grid + Export - Features: Summaries, Hiding