From 52dfe5f37e3be0ac6dd3e3980e7f14cd2b77cf2e Mon Sep 17 00:00:00 2001
From: Serhii Pylypchuk <pylypchukserhii1991@gmail.com>
Date: Wed, 28 Aug 2024 00:12:52 +0400
Subject: [PATCH] [update] React and Angular guides (styles) (#12)

* [update] how to start with npm

* [update] integration with angular

* Add minor changes to angular guide

* [update] integration with react

* [update] integration with svelte

* Add minor changes (angular and react frameworks)

* [update] integration with vue

* Add minor changes

* [update] Whats new before release v1.2.9

* Add minor fix after review

* [update] wn minor fix

* [update] changes after review

* [update]  minor fixes

* [update] angular guide

* Update the React integration guide

* Add minor changes related to loading data via parse method (React)

* Update guides related to integration with Vue and React

* Update Angular and Vue integration guides

* [update] integration guides

* [dev] update docusaurus from 3.3.2 to 3.5.2

* [update] minor changes before release 1.2.9

* [update] Angular integration guide

* [update] React integration guide

* [update] React and Angular guides (styles)
---
 docs/guides/integration_with_angular.md | 26 +++++++++-------
 docs/guides/integration_with_react.md   | 40 +++++++++++++++++++++----
 2 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/docs/guides/integration_with_angular.md b/docs/guides/integration_with_angular.md
index 0483422..4fad142 100644
--- a/docs/guides/integration_with_angular.md
+++ b/docs/guides/integration_with_angular.md
@@ -89,9 +89,10 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
     encapsulation: ViewEncapsulation.None,
     selector: "todo", // a template name used in the "app.component.ts" file as <todo />
     styleUrls: ["./todo.component.css"], // include the css file
-    template:  `<main class="component_container">
+
+    template:  `<main class = "component_container">
                     <div #toolbar_container></div>
-                    <div #todo_container style="height: calc(100% - 56px);"></div>
+                    <div #todo_container class = "widget"></div>
                 </main>`
 })
 
@@ -132,19 +133,24 @@ To display To Do List correctly, you need to provide the corresponding styles. F
 
 /* specify styles for initial page */
 html,
-body {
-    margin: 0;
-    padding: 0;
+body{
     height: 100%;
+    padding: 0;
+    margin: 0;
     background-color: #f7f7f7;
 }
 
-/* specify styles for the To Do List container */
+/* specify styles for To Do List and Toolbar container*/
 .component_container {
     height: 100%; 
     max-width: 800px; 
     margin: 0 auto;
 }
+
+/* specify styles for To Do List container */
+.widget {
+    height: calc(100% - 56px);
+}
 ~~~
 
 #### Loading data
@@ -204,9 +210,9 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
     encapsulation: ViewEncapsulation.None,
     selector: "todo", 
     styleUrls: ["./todo.component.css"], 
-    template:  `<main class="component_container">
+    template:  `<main class = "component_container">
                     <div #toolbar_container></div>
-                    <div #todo_container style="height: calc(100% - 56px);"></div>
+                    <div #todo_container class = "widget"></div>
                 </main>`
 })
 
@@ -250,9 +256,9 @@ import { Component, ElementRef, OnInit, ViewChild, OnDestroy, ViewEncapsulation}
     encapsulation: ViewEncapsulation.None,
     selector: "todo", 
     styleUrls: ["./todo.component.css"], 
-    template:  `<main class="component_container">
+    template:  `<main class = "component_container">
                     <div #toolbar_container></div>
-                    <div #todo_container style="height: calc(100% - 56px);"></div>
+                    <div #todo_container class = "widget"></div>
                 </main>`
 })
 
diff --git a/docs/guides/integration_with_react.md b/docs/guides/integration_with_react.md
index 8682dd1..819fe17 100644
--- a/docs/guides/integration_with_react.md
+++ b/docs/guides/integration_with_react.md
@@ -113,13 +113,41 @@ export default function ToDoComponent(props) {
         };
     }, []);
 
-    return  <div>
+    return  <div className="component_container">
                 <div ref={toolbar_container}></div>
-                <div ref={todo_container} style={{ height: "calc(100% - 56px)" }}></div>
+                <div ref={todo_container} className="widget"></div>
             </div>
 }
 ~~~
 
+#### Adding styles
+
+To display To Do List correctly, you need to provide the corresponding styles. You can use the **index.css** file to specify important styles for To Do List and its containers:
+
+~~~css title="index.css"
+/* specify styles for initial page */
+html,
+body,
+#root {
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: #f7f7f7;
+}
+
+/* specify styles for To Do List and Toolbar container*/
+.component_container {
+    height: 100%; 
+    max-width: 800px; 
+    margin: 0 auto;
+}
+
+/* specify styles for To Do List container*/
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
 #### Loading data
 
 To add data into the To Do List, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
@@ -210,9 +238,9 @@ export default function ToDoComponent(props) {
         };
     }, []);
 
-    return  <div>
+    return  <div className="component_container">
                 <div ref={toolbar_container}></div>
-                <div ref={todo_container} style={{ height: "calc(100% - 56px)" }}></div>
+                <div ref={todo_container} className="widget"></div>
             </div>
 }
 ~~~
@@ -248,9 +276,9 @@ export default function ToDoComponent(props) {
         };
     }, []);
 
-    return  <div>
+    return  <div className="component_container">
                 <div ref={toolbar_container}></div>
-                <div ref={todo_container} style={{ height: "calc(100% - 56px)" }}></div>
+                <div ref={todo_container} className="widget"></div>
             </div>
 }
 ~~~