Merge latest adminUI-Redesign into Develop (#927)

* Updated CODE_STYLE.md * Updated CODE_STYLE.md (#917) * Updated CODE_STYLE.md * Import section update * Upgrade and Migrate from Bootstrap 4 to Bootstrap 5 (#925) * Updated CODE_STYLE.md * Latest Boostrap v5.3.0 & react-bootstrap v2.7.4 installed * Buttons replaced from normal ones to Bootstrap ones * Import section update * Error fixed for Buttons * Language dropdowns and Change language * InputBoxes & Checkboxes fixed and imported from BS * Removed unused package popper.js * Replaced react-modal with Bootstrap one in Login Page * Modals converted to React Bootstrap one * Completely replaced react-modal with react-bootstrap/Modal from the project * Removed react-modal from the project * Removed classbased modal and unused images * Notification navbar migrated * Modal migration * Modal migration * Modal migration done for OrgPostCard * Empty commit to make workflow run * Empty commit to make workflow run * Empty commit to run the workflow --------- Co-authored-by: Anwer Sayeed <deeyasrewna@gmail.com>
PalisadoesFoundation · Jun 14, 2023 · f94c4a5 · f94c4a5
1 parent 1206456
commit f94c4a5
Show file tree

Hide file tree

Showing 43 changed files with 1,219 additions and 1,307 deletions.
diff --git a/CODE_STYLE.md b/CODE_STYLE.md
@@ -38,7 +38,94 @@ code style should not be changed and must be followed.
 
 - All the Return fragment should be closed in empty tag
 
-- Use of classes is refrained 
+- Imports should be grouped in the following order:
+
+    - React imports
+
+    - Third party imports
+
+    - Local imports
+
+
+- If there is more than one import from a single library, they should be grouped together
+
+Example - 
+
+If there is single import from a library, both ways will work
+
+```
+import Row from 'react-bootstrap/Row';
+// OR
+import { Row } from 'react-bootstrap';
+```
+
+If there are multiple imports from a library, they should be grouped together
+
+```
+import { Row, Col, Container } from 'react-bootstrap';
+```
+
+- Use of custom classes directly are refrained, use of modular css is encouraged along with bootstrap classes
+
+**Wrong way ❌**
+```
+<div className="myCustomClass">...</div>
+<div className={`${styles.myCustomClass1} myCustomClass2`}>...</div> // No using personal custom classes directly, here you should  not use myCustomClass2
+.container{...} // No changing the property of already existing classes reserved by boostrap directly in css files
+```
+
+**Correct ways ✅** 
+```
+<div className={styles.myCustomClass}>...</div> // Use custom class defined in modular css file
+<div className={`${styles.myCustomClass} relative bg-danger`}>...</div> // Use classes already defined in Bootstrap
+<div className={styles.myCustomClass + ' relative bg-danger' }>...</div> // Use classes already defined in Bootstrap
+```
+
+- All components should be either imported from React-Bootstrap library or Material UI library, components should not be written using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library.
+
+**Example: Bootstrap Dropdown**
+
+**Wrong way ❌**
+
+Using plain Bootstrap classes and attributes without leveraging the React-Bootstrap library should be refrained. While it may work for basic functionality, it doesn't fully integrate with React and may cause issues when dealing with more complex state management or component interactions. 
+```
+    <div class="dropdown">
+        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+            Dropdown button
+        </button>
+        <ul class="dropdown-menu">
+            <li><a class="dropdown-item" href="#">Action</a></li>
+            <li><a class="dropdown-item" href="#">Another action</a></li>
+            <li><a class="dropdown-item" href="#">Something else here</a></li>
+        </ul>
+    </div>
+```
+
+
+**Correct way ✅**
+
+It's recommended to use the React-Bootstrap library for seamless integration of Bootstrap components in a React application.
+```
+import Dropdown from 'react-bootstrap/Dropdown';
+
+function BasicExample() {
+  return (
+    <Dropdown>
+      <Dropdown.Toggle variant="success" id="dropdown-basic">
+        Dropdown Button
+      </Dropdown.Toggle>
+
+      <Dropdown.Menu>
+        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
+        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
+        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+}
+
+export default BasicExample;
+```
 
 
 ## Test and Code Linting