[add] svar integration guides

docs/index.md

@@ -62,9 +62,29 @@ A gallery of live demos provides real-life examples of using DHTMLX widgets in w
 
 A [set of CSS templates](https://dhtmlx.com/docs/products/dhtmlxSuite/how-to-create-javascript-applications/) is specially designed for various use cases that can be implemented using DHTMLX widgets. You can borrow the CSS code and apply the styles you like in your web app.
 
-### Integration with Angular, React, and Vue.js
+### Integration with frameworks
+
 [comment]: # (ссылки ниже должны уводить на страницы доки)
-DHTMLX Suite is compatible with any client-side framework. There are code examples of how to use DHTMLX widgets with [Angular](integration/suite_and_angular.md), [React](integration/suite_and_react.md), and [Vue.js](integration/suite_and_vue.md) available on our GitHub pages.
+
+DHTMLX Suite is compatible with client-side frameworks. Refer to the following guides for more information on how to use DHTMLX Suite widgets with frameworks:
+- [Integration with React](integration/suite_and_react.md)
+- [Integration with Angular](integration/suite_and_angular.md)
+- [Integration with Vue](integration/suite_and_vue.md)
+- [Integration with Svelte](integration/suite_and_svelte.md)
+
+You can import DHTMLX Suite into your project using `yarn` or `npm` package manager.
+
+#### Installing trial DHTMLX Suite via npm and yarn
+
+:::info
+If you want to use trial version of Suite, download the [**trial Suite package**](https://dhtmlx.com/docs/products/dhtmlxSuite/download.shtml) and follow steps mentioned in the *README* file. Note that trial Suite is available 30 days only.
+:::
+
+#### Installing PRO DHTMLX Suite via npm and yarn
+
+:::info
+If you have already own Suite under the proprietary license, send your **license number** on the *[email protected]* email to receive *login* and *password* for private **npm** as well as detailed guide on how to install Suite. Note that private **npm** is available before the expiration of the proprietary Suite license.
+:::
 
 ### Integration with any backend technologies
 

docs/integration/suite_and_angular.md

@@ -1,14 +1,85 @@
 ---
-sidebar_label: Code examples with Angular
-title: Code examples of DHTMLX Widgets with Angular 
-description: You can explore how to use DHTMLX Widgets with Angular. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+sidebar_label: Integration with Angular
+title: Integration DHTML Suite with Angular
+description: You can explore how to use DHTMLX Suite Widgets with Angular. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
 ---
 
-# Code examples of how to use Widgets with Angular
+# Integration Suite widgets with Angular
 
-![](../assets/integration/work_with_frameworks.png)
+:::tip
+You should be familiar with basic concepts and patterns of **Angular** before reading this documentation. To refresh your knowledge, please refer to the [**Angular documentation**](https://angular.io/docs).
+:::
 
-DHTMLX Suite is compatible with Angular. We have prepared code examples of how to use DHTMLX widgets with Angular.
+DHTMLX Suite is compatible with **Angular**. We have prepared code examples on how to use DHTMLX Suite with **Angular**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/angular-suite-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Angular CLI**](https://angular.io/cli) and [**Node.js**](https://nodejs.org/en/).
+:::
+
+Create a new **my-angular-suite-app** project using Angular CLI. Run the following command for this purpose:
+
+~~~json
+ng new my-angular-suite-app
+~~~
+
+:::note
+If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
+:::
+
+The command above installs all the necessary tools, so you don't need to run any additional commands.
+
+### Installation of dependencies
+
+Go to the new created app directory:
+
+~~~json
+cd my-angular-suite-app
+~~~
+
+Install dependencies and start the dev server. For this, use the [**yarn**](https://yarnpkg.com/) package manager:
+
+~~~json
+yarn
+yarn start
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Install Suite sources
+
+Now you should get the DHTMLX Suite source code. First of all, stop the app and proceed with installing the Suite package.
+
+### Step 1. Install package
+
+Download the [**trial Suite package**](../../#installing-trial-dhtmlx-suite-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Suite is available 30 days only.
+
+### Step 2. Create components
+
+Now you need to create Angular components, to add Suite widgets into the application.
+
+TODO!!! Add app structure
+
+#### Import source files
+
+Open the **suite.component.ts** file and import Suite source files. Note that:
+
+- if you use PRO version and install the Suite package from a local folder, the imported path looks like this:
+
+~~~jsx
+import { WidgetName } from 'dhx-suite-package';
+~~~
+
+- if you use the trial version of Suite, specify the following path:
+
+~~~jsx
+import { WidgetName } from '@dhx/trial-suite';
+~~~
+
+In this tutorial you can see how to configure the **trial** version of Suite.
+
+TODO!!! NEXT STEPS
 
 - To check online samples, please refer to the corresponding [Example on Replit](https://replit.com/@dhtmlx/dhtmlx-suite-with-angular).
 - To download samples, please check our GitHub repository: [DHTMLX Widgets + Angular](https://github.com/DHTMLX/angular-suite-demo). The README.md file provides all the necessary information on how to run the app in the development mode.

docs/integration/suite_and_react.md

@@ -1,14 +1,92 @@
 ---
-sidebar_label: Code examples with React
-title: Code examples of DHTMLX Widgets with React 
-description: You can explore how to use DHTMLX Widgets with React. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+sidebar_label: Integration with React
+title: Integration DHTML Suite with React
+description: You can explore how to use DHTMLX Suite Widgets with React. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
 ---
 
-# Code examples of how to use widgets with React
+# Integration Suite widgets with React
 
-![](../assets/integration/work_with_frameworks.png)
+:::tip
+You should be familiar with the basic concepts and patterns of [**React**](https://react.dev) before reading this documentation. To refresh your knowledge, please refer to the [**React documentation**](https://reactjs.org/docs/getting-started.html).
+:::
 
-DHTMLX Suite is compatible with React. We have prepared code examples of how to use DHTMLX widgets with React.
+DHTMLX Suite widgets are compatible with **React**. We have prepared code examples on how to use DHTMLX Suite widgets with **React**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/react-suite-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
+:::
+
+You can create a basic **React** project or use **React with Vite**. Let's name the project as **my-react-suite-app**:
+
+~~~json
+npx create-react-app my-react-suite-app
+~~~
+
+### Installation of dependencies
+
+Go to the new created app directory:
+
+~~~json
+cd my-react-suite-app
+~~~
+
+Install dependencies and start the dev server. For this, use a package manager:
+
+- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Install Suite sources
+
+Now you should get the DHTMLX Suite source code. First of all, stop the app and proceed with installing the Suite package.
+
+### Step 1. Install package
+
+Download the [**trial Suite package**](../../#installing-trial-dhtmlx-suite-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Suite is available 30 days only.
+
+### Step 2. Create components
+
+Now you need to create React components, to add Suite widgets into the application.
+
+TODO!!! Add app structure
+
+#### Import source files
+
+Open the ***ComponentName.jsx*** file and import widget source files. Note that:
+
+- if you use PRO version and install the Suite package from a local folder, the import paths look like this:
+
+~~~jsx title="Component.jsx"
+import { WidgetName } from 'dhx-suite-package';
+import 'dhx-suite-package/codebase/suite.css';
+~~~
+
+Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as ***suite.min.css***.
+
+- if you use the trial version of Suite, specify the following paths:
+
+~~~jsx title="Component.jsx"
+import { WidgetName } from '@dhx/trial-suite';
+import "@dhx/trial-suite/codebase/suite.min.css";
+~~~
+
+In this tutorial you can see how to configure the **trial** version of Suite.
+
+TODO!!! NEXT STEPS
 
 - To check online samples, please refer to the corresponding [Example on Replit](https://replit.com/@dhtmlx/dhtmlx-suite-with-react).
 - To download samples, please check our GitHub repository: [DHTMLX Widgets + React](https://github.com/DHTMLX/react-suite-demo). The README.md file provides all the necessary information on how to run the app in the development mode.

docs/integration/suite_and_svelte.md

@@ -1,14 +1,104 @@
 ---
-sidebar_label: Code examples with Svelte
-title: Code examples of DHTMLX Widgets with Svelte 
-description: You can explore how to use DHTMLX Widgets with Svelte. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
+sidebar_label: Integration with Svelte
+title: Integration DHTML Suite with Svelte 
+description: You can explore how to use DHTMLX Suite Widgets with Svelte. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite.
 ---
 
-# Code examples of how to use widgets with Svelte
+# Integration Suite widgets with Svelte
 
-![](../assets/integration/work_with_frameworks.png)
+:::tip
+You should be familiar with the basic concepts and patterns of **Svelte** before reading this documentation. To refresh your knowledge, please refer to the [**Svelte documentation**](https://svelte.dev/).
+:::
 
-DHTMLX Suite is compatible with Svelte. We have prepared code examples of how to use DHTMLX widgets with Svelte.
+DHTMLX Suite is compatible with **Svelte**. We have prepared code examples on how to use DHTMLX Suite with **Svelte**. For more information, refer to the corresponding [**Example on GitHub**](https://github.com/DHTMLX/svelte-suite-demo).
+
+## Creating a project
+
+:::info
+Before you start to create a new project, install [**Vite**](https://vite.dev/) (optional) and [**Node.js**](https://nodejs.org/en/).
+:::
+
+There are several ways of creating a **Svelte** project:
+
+- you can use the [**SvelteKit**](https://kit.svelte.dev/)
+
+or
+
+- you can also use **Svelte with Vite** (but without SvelteKit):
+
+~~~json
+npm create vite@latest
+~~~
+
+Check the details in the [related article](https://svelte.dev/docs/introduction#start-a-new-project-alternatives-to-sveltekit).
+
+### Installation of dependencies
+
+Let's name the project as **my-svelte-suite-app** and go to the app directory:
+
+~~~json
+cd my-svelte-suite-app
+~~~
+
+Install dependencies and start the dev server. For this, use a package manager:
+
+- if you use [**yarn**](https://yarnpkg.com/), run the following commands:
+
+~~~json
+yarn
+yarn start
+~~~
+
+- if you use [**npm**](https://www.npmjs.com/), run the following commands:
+
+~~~json
+npm install
+npm run dev
+~~~
+
+The app should run on a localhost (for instance `http://localhost:3000`).
+
+## Install Suite sources
+
+Now you should get the DHTMLX Suite source code. First of all, stop the app and proceed with installing the Suite package.
+
+### Step 1. Install package
+
+Download the [**trial Suite package**](../../#installing-trial-dhtmlx-suite-via-npm-and-yarn) and follow steps mentioned in the README file. Note that trial Suite is available 30 days only.
+
+### Step 2. Create components
+
+Now you need to create React components, to add Suite widgets into the application.
+
+TODO!!! Add app structure
+
+#### Import source files
+
+Open the ***Suite.svelte*** file and import Suite source files. Note that:
+
+- if you use PRO version and install the Suite package from a local folder, the import paths look like this:
+
+~~~html title="Component.svelte"
+<script>
+import { WidgetName } from 'dhx-suite-package';
+import 'dhx-suite-package/codebase/suite.css';
+</script>
+~~~
+
+Note that depending on the used package, the source files can be minified. In this case make sure that you are importing the CSS file as **suite.min.css**.
+
+- if you use the trial version of Suite, specify the following paths:
+
+~~~html title="Component.svelte"
+<script>
+import { WidgetName } from '@dhx/trial-suite';
+import '@dhx/trial-suite/codebase/suite.css';
+<script>
+~~~
+
+In this tutorial you can see how to configure the **trial** version of Suite.
+
+TODO!!! NEXT STEPS
 
 - To check online samples, please refer to the corresponding [Example on Replit](https://replit.com/@dhtmlx/dhtmlx-suite-with-svelte).
 - To download samples, please check our GitHub repository: [DHTMLX Widgets + Svelte](https://github.com/DHTMLX/svelte-suite-demo). The README.md file provides all the necessary information on how to run the app in the development mode.