From 3a7e5a435e79f628d9ab59028355d063bd0f1632 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Fri, 19 Sep 2025 18:04:25 +0300 Subject: [PATCH 1/2] fix(getting-started): adding ig cli info for getting started + packages --- doc/en/components/general-getting-started.md | 72 ++++++++++++++------ stats/docStats-React.json | 6 +- stats/docStats-WC.json | 6 +- 3 files changed, 62 insertions(+), 22 deletions(-) diff --git a/doc/en/components/general-getting-started.md b/doc/en/components/general-getting-started.md index d4ae3cc57..7578dfe56 100644 --- a/doc/en/components/general-getting-started.md +++ b/doc/en/components/general-getting-started.md @@ -5,10 +5,61 @@ _keywords: {ProductName}, Infragistics, Getting Started mentionedTypes: ["XamBulletGraph"] --- + +# {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} Packages Overview + +{ProductName} is a comprehensive suite of UI components, design toolkits, and supporting services for React. Built to empower developers to create modern, high-performance React applications for desktop browsers, mobile experiences, and progressive web apps (PWAs), {ProductName} leverages the latest React best practices and APIs. + + + + + +## 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. + +## 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. + +## 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. + +## 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. + +## 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. + + + + + # Getting Started With {ProductName} -This topic provides step-by-step instructions for creating React applications with Ignite UI for React +## Install IgniteUI CLI + +To create an application from scratch and configure it to use the Ignite UI React you can use the Ignite UI CLI. The first step is to install the respective package globally as follows: + +```cmd +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: + +```cmd +ig +``` + +Then choose React as framework, React TS as type, select `Default Top Navigation` project template, add a specific component/view or select `Complete & Run`. +Additionally, you can read more about the Ignite UI CLI [here](general-cli-overview.md). + +Alternatively, you can use create-react-app. Following is a step-by-step instructions for creating React applications with Ignite UI React using this method. ## Prerequisites @@ -58,25 +109,6 @@ cd MyAppName -# {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. - -## 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. - -## 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. - -## 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. - -## 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. - -## 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. - # Getting Started With {ProductName} This section provides step-by-step instructions for creating Web Components application with Ignite UI for Web Components. diff --git a/stats/docStats-React.json b/stats/docStats-React.json index d2280995e..b3e58ce9c 100644 --- a/stats/docStats-React.json +++ b/stats/docStats-React.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in React documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "React", - "samplesCount": 733, + "samplesCount": 734, "samplesHost": "https://staging.infragistics.com/react-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -1939,6 +1939,9 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/textarea/styling": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/text-area" ], + "https://staging.infragistics.com/react-demos/samples/samples/inputs/tooltip/advanced": [ + "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip" + ], "https://staging.infragistics.com/react-demos/samples/samples/inputs/tooltip/overview": [ "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip" ], @@ -3447,6 +3450,7 @@ "https://staging.infragistics.com/react-demos/samples/samples/inputs/textarea/styling" ], "https://staging.infragistics.com/products/ignite-ui-react/react/components/inputs/tooltip": [ + "https://staging.infragistics.com/react-demos/samples/samples/inputs/tooltip/advanced", "https://staging.infragistics.com/react-demos/samples/samples/inputs/tooltip/overview", "https://staging.infragistics.com/react-demos/samples/samples/inputs/tooltip/placement", "https://staging.infragistics.com/react-demos/samples/samples/inputs/tooltip/rich", diff --git a/stats/docStats-WC.json b/stats/docStats-WC.json index a703d7966..a47ed121c 100644 --- a/stats/docStats-WC.json +++ b/stats/docStats-WC.json @@ -2,7 +2,7 @@ "note": "this auto-generated file provides stats about samples used in WebComponents documentation", "info": "you can lookup samples in 'samplesUsage' or lookup topics in 'topicsWithSamples' ", "platform": "WebComponents", - "samplesCount": 784, + "samplesCount": 785, "samplesHost": "https://staging.infragistics.com/webcomponents-demos/samples", "samplesNote": "the 'samplesUsage' provides lookup of samples usage in topics", "samplesUsage": { @@ -2037,6 +2037,9 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/textarea/styling": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/text-area" ], + "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/tooltip/advanced": [ + "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip" + ], "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/tooltip/overview": [ "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip" ], @@ -3648,6 +3651,7 @@ "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/textarea/styling" ], "https://staging.infragistics.com/products/ignite-ui-web-components/web-components/components/inputs/tooltip": [ + "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/tooltip/advanced", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/tooltip/overview", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/tooltip/placement", "https://staging.infragistics.com/webcomponents-demos/samples/samples/inputs/tooltip/rich", From 0754ee380caf8c28fbdaadfdffaa5a142c228a82 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Mon, 29 Sep 2025 18:01:13 +0300 Subject: [PATCH 2/2] chore(*): replacing obsolete create-react-app refs --- doc/en/components/general-getting-started.md | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/doc/en/components/general-getting-started.md b/doc/en/components/general-getting-started.md index 7578dfe56..0c694b706 100644 --- a/doc/en/components/general-getting-started.md +++ b/doc/en/components/general-getting-started.md @@ -59,7 +59,7 @@ ig Then choose React as framework, React TS as type, select `Default Top Navigation` project template, add a specific component/view or select `Complete & Run`. Additionally, you can read more about the Ignite UI CLI [here](general-cli-overview.md). -Alternatively, you can use create-react-app. Following is a step-by-step instructions for creating React applications with Ignite UI React using this method. +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. ## Prerequisites @@ -94,17 +94,10 @@ With above prerequisites installed, we can create a new React application. 2 - Type one of these commands in terminal window: ```cmd -npx create-react-app MyAppName --typescript +npx create-next-app@latest ``` -```cmd -yarn create react-app MyAppName --typescript -``` - -Depending on the approach `npx` or `yarn` will be required. Refer to this website for more information on above commands. -```cmd -cd MyAppName -``` +Then follow the prompts to choose a name for the project, whether to use Typescript or not and for various other options React provides. For this example `npx` and `create-next-app` are required. Refer to this topic for more information on the different ways to boilerplate a React application.