Add RebootButton and RichTable components to documentation

src/common/RebootButton.js

@@ -16,6 +16,11 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from "../bootstrap/Modal";
 import { useAlert } from "../context/alertContext/AlertContext";
 import { ForisURLs } from "../utils/forisUrls";
 
+RebootButton.propTypes = {
+    /** Additional props to be passed to the button */
+    props: PropTypes.object,
+};
+
 function RebootButton(props) {
     const [triggered, setTriggered] = useState(false);
     const [modalShown, setModalShown] = useState(false);
@@ -68,7 +73,12 @@ function RebootModal({ shown, setShown, onReboot }) {
                 <p>{_("Are you sure you want to restart the router?")}</p>
             </ModalBody>
             <ModalFooter>
-                <Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
+                <Button
+                    className="btn-secondary"
+                    onClick={() => setShown(false)}
+                >
+                    {_("Cancel")}
+                </Button>
                 <Button className="btn-danger" onClick={onReboot}>
                     {_("Confirm reboot")}
                 </Button>

src/common/RebootButton.md

@@ -0,0 +1,24 @@
+RebootButton component is a button that opens a modal dialog to confirm the
+reboot of the device.
+
+## Usage
+
+```jsx
+import React, { useEffect, createContext } from "react";
+import RebootButton from "./RebootButton";
+import { AlertContextProvider } from "../context/alertContext/AlertContext";
+
+window.AlertContext = React.createContext();
+
+const RebootButtonExample = () => {
+    return (
+        <AlertContextProvider>
+            <div id="modal-container" />
+            <div id="alert-container" />
+            <RebootButton />
+        </AlertContextProvider>
+    );
+};
+
+<RebootButtonExample />;
+```

src/common/RichTable/RichTable.js

@@ -14,6 +14,7 @@ import {
     getPaginationRowModel,
     useReactTable,
 } from "@tanstack/react-table";
+import PropTypes from "prop-types";
 
 import RichTableBody from "./RichTableBody";
 import RichTableHeader from "./RichTableHeader";
@@ -21,7 +22,20 @@ import RichTablePagination from "./RichTablePagination";
 
 const fallbackData = [];
 
-const RichTable = ({
+RichTable.propTypes = {
+    /** Columns to be displayed in the table */
+    columns: PropTypes.array.isRequired,
+    /** Data to be displayed in the table */
+    data: PropTypes.array.isRequired,
+    /** Whether to display pagination */
+    withPagination: PropTypes.bool,
+    /** Number of rows per page */
+    pageSize: PropTypes.number,
+    /** Index of the current page */
+    pageIndex: PropTypes.number,
+};
+
+function RichTable({
     columns,
     data,
     withPagination,
@@ -65,6 +79,6 @@ const RichTable = ({
             )}
         </div>
     );
-};
+}
 
 export default RichTable;

src/common/RichTable/RichTable.md

@@ -0,0 +1,135 @@
+### Description
+
+Rich Table is a table component based on
+[Tanstack React Table](https://tanstack.com/table/). It adds some features to
+the table component, such as:
+
+-   **Pagination**: The table can be paginated.
+-   **Sorting**: The table can be sorted by columns.
+-   **Row Expansion**: The table rows can be expanded. (To be implemented)
+
+### Example
+
+```js
+import RichTable from "./RichTable";
+
+const columns = [
+    {
+        header: "Name",
+        accessorKey: "name",
+    },
+    {
+        header: "Surname",
+        accessorKey: "surname",
+    },
+    {
+        header: "Age",
+        accessorKey: "age",
+    },
+    {
+        header: "Phone",
+        accessorKey: "phone",
+    },
+];
+
+const data = [
+    {
+        name: "John",
+        surname: "Coltrane",
+        age: 30,
+        phone: "123456789",
+    },
+    {
+        name: "Jane",
+        surname: "Doe",
+        age: 25,
+        phone: "987654321",
+    },
+    {
+        name: "Alice",
+        surname: "Smith",
+        age: 35,
+        phone: "123456789",
+    },
+    {
+        name: "Bob",
+        surname: "Smith",
+        age: 40,
+        phone: "987654321",
+    },
+    {
+        name: "Charlie",
+        surname: "Brown",
+        age: 45,
+        phone: "123456789",
+    },
+    {
+        name: "Daisy",
+        surname: "Brown",
+        age: 50,
+        phone: "987654321",
+    },
+    {
+        name: "Eve",
+        surname: "Johnson",
+        age: 55,
+        phone: "123456789",
+    },
+    {
+        name: "Frank",
+        surname: "Johnson",
+        age: 60,
+        phone: "987654321",
+    },
+    {
+        name: "Grace",
+        surname: "Williams",
+        age: 65,
+        phone: "123456789",
+    },
+    {
+        name: "Henry",
+        surname: "Williams",
+        age: 70,
+        phone: "987654321",
+    },
+    {
+        name: "Ivy",
+        surname: "Brown",
+        age: 75,
+        phone: "123456789",
+    },
+    {
+        name: "Jack",
+        surname: "Brown",
+        age: 80,
+        phone: "987654321",
+    },
+    {
+        name: "Kelly",
+        surname: "Johnson",
+        age: 85,
+        phone: "123456789",
+    },
+    {
+        name: "Liam",
+        surname: "Johnson",
+        age: 90,
+        phone: "987654321",
+    },
+    {
+        name: "Mia",
+        surname: "Williams",
+        age: 95,
+        phone: "123456789",
+    },
+    {
+        name: "Nathan",
+        surname: "Williams",
+        age: 100,
+        phone: "987654321",
+    },
+];
+
+<RichTable columns={columns} data={data} withPagination />;
+```