From 1b5ea4cea98e70be28806cb6f9635fa8296a47dd Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Mon, 8 Dec 2025 18:39:30 +0200 Subject: [PATCH 1/2] feat(*): applying licensing/getting-started improvs --- doc/en/components/general-getting-started.md | 43 +++++++++++-------- doc/en/components/general-licensing.md | 45 +++++++++++--------- 2 files changed, 50 insertions(+), 38 deletions(-) diff --git a/doc/en/components/general-getting-started.md b/doc/en/components/general-getting-started.md index a70bc077f..7d72586da 100644 --- a/doc/en/components/general-getting-started.md +++ b/doc/en/components/general-getting-started.md @@ -5,10 +5,14 @@ _keywords: {ProductName}, Infragistics, Getting Started mentionedTypes: ["XamBulletGraph", "IgrGrid"] --- - - # Getting Started With {ProductName} +[`{ProductName}`]({GithubLink}) is a complete set of UI widgets, components, and Sketch UI kits for {Platform} by Infragistics. It enables developers to build modern, high-performance HTML5 and JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWAs). + +{ProductName} comprises several packages available under either an MIT or a commercial license, depending on the components and services they contain. For a detailed list of components and their license, please refer to the [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md) topics. + + + ## Prerequisites 1. Install NodeJS. @@ -41,20 +45,23 @@ To create an application from scratch and configure it to use Ignite UI React yo npm install -g igniteui-cli ``` -If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application. To start the guide, simply run the `ig` command: +If you want to get a guided experience through the available options, you can initialize the step-by-step mode that will help you create and set up your new application. To start the guide, simply run the `ig` command: ```cmd ig ``` -Then choose `React` as framework, `Ignite UI for React TS` as type, select `Default Top Navigation` project template, add a specific component/view or select `Complete & Run`. +Then choose `React` as the framework and `Ignite UI for React TS` as the project type. Select the `Default Top Navigation` project template, add a specific component/view, or select `Complete & Run`. For more information about the Ignite UI CLI, see the [CLI overview](general-cli-overview.md). If you added a Grid component during the prompts, once the application is running you should see something similar to the following: -Alternatively, you can use popular frameworks such as Next.js, Vite or Expo as recommended by the React team. Following is a step-by-step instructions for creating React applications with Ignite UI React using one of these methods. +>[!NOTE] +> Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). + +Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as recommended by the React team. The following are step-by-step instructions for creating React applications with Ignite UI for React using one of these methods. ## Using Vite CLI @@ -70,7 +77,7 @@ All popular frameworks for React development provide powerful CLI tools for scaf npm create vite@latest ``` -Then follow the prompts to choose a name for the project, React as a platform to create the project for, whether to use Typescript or not and for various other options Vite provides. Please, refer to this topic for more information on the different ways to boilerplate a React application. +Then follow the prompts to choose a name for the project, React as the framework, whether to use TypeScript, and various other options provided by Vite. Please refer to this topic for more information on the different ways to boilerplate a React application. ### Adding an Ignite UI React Grid Component @@ -142,10 +149,10 @@ After executing this command, your project will be built and served locally on y # Getting Started With {ProductName} -This section provides step-by-step instructions for creating Web Components application with Ignite UI for Web Components. +This section provides step-by-step instructions for creating a Web Components application with Ignite UI for Web Components. -## Install IgniteUI CLI +## Install Ignite UI CLI To create an application from scratch and configure it to use the Ignite UI Web Components you can use the Ignite UI CLI. The first step is to install the respective package globally as follows: @@ -153,7 +160,7 @@ To create an application from scratch and configure it to use the Ignite UI Web npm install -g igniteui-cli ``` -If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application. To start the guide, simply run the `ig` command: +If you want to get a guided experience through the available options, you can initialize the step-by-step mode that will help you create and set up your new application. To start the guide, simply run the `ig` command: ```cmd ig @@ -281,7 +288,7 @@ code . > [!Note] > This script will use webpack to bundle the **index.js** file into another file called **index.bundle.js** and place it into a folder named **dist**. > -> If a **javaScript heap out of memory** issue occurs while building you can increase the heap size by using this build command instead: +> If a **JavaScript heap out of memory** issue occurs while building you can increase the heap size by using this build command instead: ```json "scripts": { @@ -386,7 +393,7 @@ npm run build ## Updating Existing Apps -If you want to use {ProductName} in an existing {Platform} CLI project (one that you have from before). We have you covered! All you have to do is execute these commands: +If you want to use {ProductName} in an existing {Platform} CLI project, we have you covered! All you have to do is execute these commands: ```cmd npm install --save {PackageCommon} @@ -416,7 +423,7 @@ This will automatically install packages for {ProductName}, along with all of th # {ProductName} Packages Overview -{ProductName} is a complete set of UI widgets, components, UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting the browsers web components APIs. +{ProductName} is a complete set of UI widgets, components, and UI kits for design tools and supporting services for Web Components. Designed to enable developers to build the most modern, high-performance HTML5 and JavaScript apps for modern desktop browsers, mobile experiences, and progressive web apps (PWAs) targeting the browsers web components APIs. @@ -430,19 +437,19 @@ This will automatically install packages for {ProductName}, along with all of th ## Charts & Graphs -{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations into stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device. +{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations to create stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device. ## Gauges -{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](bullet-graph.md) component that lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts. +{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](bullet-graph.md) component lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts. ## Maps -{ProductName} [Geographic Maps](geo-map.md) brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors. +The {ProductName} [Geographic Map](geo-map.md) component brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors. ## Grids & Inputs -{ProductName} provides several [Grids](grids/grids-header.md) components that allows you to bind and display data with little configuration in form of [Data Grid](grids/data-grid.md), [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). It also provides features such as filtering, sorting, grouping, pinning and more. +{ProductName} provides several [Grid](grids/grids-header.md) components that allow you to bind and display data with little configuration in the form of [Grid Lite](grid-lite/overview.md) - a light-weight grid component under MIT license, [Data Grid](grids/data-grid.md) - a feature-rich grid component under commercial license, [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md). -## Buttons, Inputs, Layouts & Menus -{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma. +## Buttons, Inputs, Layouts, and Menus +{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Sketch, Adobe XD and Figma. diff --git a/doc/en/components/general-licensing.md b/doc/en/components/general-licensing.md index 43a10e821..1a7d9364c 100644 --- a/doc/en/components/general-licensing.md +++ b/doc/en/components/general-licensing.md @@ -6,14 +6,19 @@ mentionedTypes: [] --- # License FAQ and Installation + +{ProductName} comprises packages available under either an MIT or a commercial license. This licensing model supports both commercial and permissive open-source usage, depending on the specific components, modules, and services you incorporate into your project. + +It is crucial to understand which license applies to which part of the package. The topic [Open Source vs Premium](./general-open-source-vs-premium.md) contains details on what type of license is applied to each component and therefore if you need to buy a commercial license based on the components you are using in your projects. + ## License Agreements in {ProductName} -It is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) regarding the {ProductName} that you purchase and use. +For components under commercial license, it is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) regarding their purchase and use. -> We have updated our license terms and subscription model in second quarter of 2020. +> We have updated our license terms and subscription model in fourth quarter of 2025. -If your trial has ended or your subscription [has expired](http://www.infragistics.com/renewal), each developer on your team using Ignite UI will need to [purchase](https://www.infragistics.com/how-to-buy/product-pricing) a subscription. This will enable you to use our private npm feed hosted on for development. There you will find the latest versions of the {ProductName} packages. If you have a current subscription, you can use this private feed and you will have access to the full version of {ProductName}. +If your trial has ended or your subscription [has expired](http://www.infragistics.com/renewal), each developer on your team using components under commercial license from Ignite UI will need to [purchase](https://www.infragistics.com/how-to-buy/product-pricing) a subscription. This will enable you to use our private npm feed hosted on for development. There you will find the latest versions of the {ProductName} packages. If you have a current subscription, you can use this private feed and you will have access to the full version of {ProductName}. -For detailed explanation of the Ignite UI license agreement and terms of use, [click here](https://www.infragistics.com/legal/license/igultimate-la). + Infragistics offers free, non-commercial, not-for-resale (NFR) licenses for the following: @@ -22,14 +27,15 @@ Infragistics offers free, non-commercial, not-for-resale (NFR) licenses for the If you qualify for a free, non-commercial, NFR license or if you have any license questions, please [contact us](https://www.infragistics.com/about-us/contact-us). -> Currently only the **igniteui-dockmanager** package is available in our private npm feed, but in the future we will add the other {ProductName} packages as well. - ## {ProductName} npm packages - Using the Private npm feed Npm is the most popular package manager and is also the default one for the runtime environment Node.js. It is highly adopted and is one of the fastest and easiest ways to manage the packages that you depend on in your project. For more information on how npm works, read the official [npm documentation](https://docs.npmjs.com/). -Infragistics {ProductName} is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.md). Choosing this approach will not require configuring npm. By installing this package you will start using the **{ProductName} Trial version** of the product. +Infragistics {ProductName} is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.md). Choosing this approach will not require configuring npm. If you are installing a package under commercial license, you will start using the **{ProductName} Trial version** of the product. + +>[!NOTE] +> What does it mean to start using a trial version? It means that you will be using a version of our product with a **Watermark** part of your web view. It doesn’t mean that you will be using the licensed package for a certain amount of time before it expires. For example, for a month. -> Currently only the [igniteui-dockmanager](https://www.npmjs.com/package/igniteui-dockmanager) npm package has a trial watermark, but in the future we will add it to the other {ProductName} packages as well. +The private npm feed Infragistics provides contains licensed versions of the packages under commercial license. ### How to setup your environment to use the private npm feed @@ -72,11 +78,11 @@ You will be asked to provide the username and the password that you use for logg #### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project ```cmd -npm uninstall igniteui-dockmanager -npm install @infragistics/igniteui-dockmanager +npm uninstall {PackageDockManager} +npm install @infragistics/{PackageDockManager} -npm uninstall igniteui-dockmanager -npm install @infragistics/igniteui-dockmanager +npm uninstall {PackageDockManager} +npm install @infragistics/{PackageDockManager} ``` Have in mind that we have set the {ProductName} package to be scoped, meaning that no changing the registries is needed if you want to install packages from our private feed and from npmjs.org simultaneously. @@ -86,7 +92,7 @@ Have in mind that we have set the {ProductName} package to be scoped, meaning th If you are upgrading from trial to licensed package the new packages will be scoped under `@infragistics`. As a result you can either: -- Do a global replace for all trial packages and change then to the licensed scoped version across all files in your project. For example, replace all `igniteui-dockmanager` references to `@infragistics/igniteui-dockmanager` The change should affect all imports where such packages are used. +- Do a global replace for all trial packages and change then to the licensed scoped version across all files in your project. For example, replace all `{PackageDockManager}` references to `@infragistics/{PackageDockManager}` The change should affect all imports where such packages are used. **Or** @@ -100,8 +106,8 @@ As a result you can either: "outDir": "./dist/out-tsc", /* ... */ "paths": { - "igniteui-dockmanager": ["./node_modules/@infragistics/igniteui-dockmanager"], - "igniteui-dockmanager/*": ["./node_modules/@infragistics/igniteui-dockmanager/*"], + "igniteui-dockmanager": ["./node_modules/@infragistics/{PackageDockManager}"], + "igniteui-dockmanager/*": ["./node_modules/@infragistics/{PackageDockManager}/*"], } } } @@ -114,6 +120,7 @@ Here's a full example with all path mappings for the react packages you may need "paths": { "igniteui-react-core": ["node_modules/igniteui-react-core", "node_modules/@infragistics/igniteui-react-core"], "igniteui-react-charts": ["node_modules/igniteui-react-charts", "node_modules/@infragistics/igniteui-react-charts"], + "igniteui-react-dockmanager": ["node_modules/igniteui-react-dockmanager", "node_modules/@infragistics/igniteui-react-dockmanager"], "igniteui-react-grids": ["node_modules/igniteui-react-grids", "node_modules/@infragistics/igniteui-react-grids"], "igniteui-react-data-grids": ["node_modules/igniteui-react-data-grids", "node_modules/@infragistics/igniteui-react-data-grids"], "igniteui-react-grids/grids": ["node_modules/igniteui-react-grids/grids", "node_modules/@infragistics/igniteui-react-grids/grids"], @@ -126,9 +133,7 @@ Here's a full example with all path mappings for the react packages you may need "igniteui-react-datasources": ["node_modules/igniteui-react-datasources", "node_modules/@infragistics/igniteui-react-datasources"], "igniteui-react-spreadsheet": ["node_modules/igniteui-react-spreadsheet", "node_modules/@infragistics/igniteui-react-spreadsheet"], "igniteui-react-spreadsheet-chart-adapter": ["node_modules/igniteui-react-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-react-spreadsheet-chart-adapter"], - "igniteui-webcomponents": ["node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents"], - "igniteui-dockmanager": ["node_modules/igniteui-dockmanager", "node_modules/@infragisics/igniteui-dockmanager"], - "igniteui-dockmanager/loader": ["node_modules/igniteui-dockmanager/loader", "node_modules/@infragistics/igniteui-dockmanager/loader"] + "igniteui-webcomponents": ["node_modules/igniteui-webcomponents", "node_modules/@infragistics/igniteui-webcomponents"] } ``` @@ -138,11 +143,11 @@ Here's a full example with all path mappings for the react packages you may need - Change the themes imports like this: ```ts -@import '~igniteui-dockmanager/dist/collection/styles/igc.themes'; +@import '~{PackageDockManager}/dist/collection/styles/igc.themes'; // Should be changed to -@import '~@infragistics/igniteui-dockmanager/dist/collection/styles/igc.themes'; +@import '~@infragistics/{PackageDockManager}/dist/collection/styles/igc.themes'; ``` So, if you've already adopted npm and you have an {ProductName} license, don't hesitate setting up the Infragistics private feed and boost your productivity, using the full potential of {ProductName}. From 439da9282987c0fcb7a40b1bc3848fad5d40b65f Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Mon, 8 Dec 2025 19:06:22 +0200 Subject: [PATCH 2/2] fix(*): some fixes in docs --- doc/en/components/general-getting-started.md | 10 +++++----- doc/en/components/general-licensing.md | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/doc/en/components/general-getting-started.md b/doc/en/components/general-getting-started.md index 7d72586da..1f6ef6215 100644 --- a/doc/en/components/general-getting-started.md +++ b/doc/en/components/general-getting-started.md @@ -5,12 +5,16 @@ _keywords: {ProductName}, Infragistics, Getting Started mentionedTypes: ["XamBulletGraph", "IgrGrid"] --- + + # Getting Started With {ProductName} [`{ProductName}`]({GithubLink}) is a complete set of UI widgets, components, and Sketch UI kits for {Platform} by Infragistics. It enables developers to build modern, high-performance HTML5 and JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWAs). {ProductName} comprises several packages available under either an MIT or a commercial license, depending on the components and services they contain. For a detailed list of components and their license, please refer to the [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md) topics. + + ## Prerequisites @@ -59,7 +63,7 @@ If you added a Grid component during the prompts, once the application is runnin >[!NOTE] -> Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). +> Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./general-open-source-vs-premium.md#comparison-table-for-all-components). Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as recommended by the React team. The following are step-by-step instructions for creating React applications with Ignite UI for React using one of these methods. @@ -147,10 +151,6 @@ After executing this command, your project will be built and served locally on y -# Getting Started With {ProductName} - -This section provides step-by-step instructions for creating a Web Components application with Ignite UI for Web Components. - ## Install Ignite UI CLI diff --git a/doc/en/components/general-licensing.md b/doc/en/components/general-licensing.md index 1a7d9364c..1acae08e2 100644 --- a/doc/en/components/general-licensing.md +++ b/doc/en/components/general-licensing.md @@ -106,8 +106,8 @@ As a result you can either: "outDir": "./dist/out-tsc", /* ... */ "paths": { - "igniteui-dockmanager": ["./node_modules/@infragistics/{PackageDockManager}"], - "igniteui-dockmanager/*": ["./node_modules/@infragistics/{PackageDockManager}/*"], + "{PackageDockManager}": ["./node_modules/@infragistics/{PackageDockManager}"], + "{PackageDockManager}/*": ["./node_modules/@infragistics/{PackageDockManager}/*"], } } }