[update] Integration guides (#31)

* [update] redirects

* [dev] update docusaurus from 3.3.2 to 3.5.2

* [update] test commit

* [update] Angular integration guide

* [update] React integration guide

* [update] React and Angular guides (styles)

* [update] React and Vue integration guides

Author: serhiipylypchuk1991

docs/guides/integration_with_react.md

@@ -122,7 +122,7 @@ export default function KanbanComponent(props) {
 
 #### Adding styles
 
-To display Kanban correctly, you need to provide the corresponding styles. You can use the **index.css** file to specify important styles for Kanban and containers:
+To display Kanban correctly, you need to specify important styles for Kanban and its container in the main css file of the project:
 
 ~~~css title="index.css"
 /* specify styles for initial page */
@@ -324,22 +324,6 @@ useEffect(() => {
 // ...
 ~~~
 
-### Step 3. Adding Kanban into the app
-
-To add the component into the app, open the ***App.js*** file and replace the default code with the following one:
-
-~~~jsx title="App.js"
-import Kanban from "./Kanban";
-import { getData } from "./data";
-
-function App() {
-    const { columns, cards } = getData();
-    return <Kanban columns={columns} cards={cards} rows={rows} />;
-}
-
-export default App;
-~~~
-
 After that, you can start the app to see Kanban loaded with data on a page.
 
 ![Kanban initialization](../assets/trial_kanban.png)

docs/guides/integration_with_vue.md

@@ -40,9 +40,9 @@ 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
+~~~jsx
 yarn
-yarn start
+yarn start // or yarn dev
 ~~~
 
 - if you use [**npm**](https://www.npmjs.com/), run the following commands:
@@ -123,11 +123,37 @@ export default {
 <template>
     <div class="component_container">
         <div ref="toolbar_container"></div>
-        <div ref="kanban_container" style="height: calc(100% - 56px);"></div>
+        <div ref="kanban_container" class="widget"></div>
     </div>
 </template>
 ~~~
 
+#### Adding styles
+
+To display Kanban correctly, you need to specify important styles for Kanban and its container in the main css file of the project:
+
+~~~css title="main.css"
+/* specify styles for initial page */
+html,
+body,
+#app { /* make sure that you use the #app root container */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+}
+
+/* specify styles for Kanban and Toolbar container */
+.component_container {
+    height: 100%; 
+    margin: 0 auto;
+}
+
+/* specify styles for Kanban container */
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
 #### Loading data
 
 To add data into the Kanban, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
@@ -244,7 +270,7 @@ export default {
 <template>
     <div class="component_container">
         <div ref="toolbar_container"></div>
-        <div ref="kanban_container" style="height: calc(100% - 56px);"></div>
+        <div ref="kanban_container" class="widget"></div>
     </div>
 </template>
 ~~~
@@ -290,7 +316,7 @@ export default {
 <template>
     <div class="component_container">
         <div ref="toolbar_container"></div>
-        <div ref="kanban_container" style="height: calc(100% - 56px);"></div>
+        <div ref="kanban_container" class="widget"></div>
     </div>
 </template>
 ~~~
@@ -327,33 +353,6 @@ export default {
 // ...
 ~~~
 
-### Step 3. Adding Kanban into the app
-
-To add the component into the app, open the **App.vue** file and replace the default code with the following one:
-
-~~~html title="App.vue"
-<script>
-import Kanban from "./components/Kanban.vue";
-import { getData } from "./data";
-
-export default {
-    components: { Kanban },
-    data() {
-        const { columns, cards, rows } = getData();
-        return { 
-            columns, 
-            cards, 
-            rows 
-        };
-    }
-};
-</script>
-
-<template>
-    <Kanban :columns="columns" :cards="cards" :rows="rows" />
-</template>
-~~~
-
 After that, you can start the app to see Kanban loaded with data on a page.
 
 ![Kanban initialization](../assets/trial_kanban.png)