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 />;
+```

styleguide.config.js

@@ -28,11 +28,11 @@ module.exports = {
             content: "docs/development.md",
         },
         {
-            name: "Components",
+            name: "Common Components",
             description: "Set of main components.",
             sections: [
                 {
-                    name: "Foris forms",
+                    name: "Foris Form",
                     components: [
                         "src/form/components/ForisForm.js",
                         "src/form/components/alerts.js",
@@ -42,25 +42,22 @@ module.exports = {
                     usageMode: "expand",
                 },
                 {
-                    name: "Alert Context",
-                    components: ["src/context/alertContext/AlertContext.js"],
+                    name: "Rich Table",
+                    components: ["src/common/RichTable/RichTable.js"],
+                    exampleMode: "expand",
+                    usageMode: "expand",
+                },
+                {
+                    name: "Reboot Button",
+                    components: ["src/common/RebootButton.js"],
                     exampleMode: "expand",
                     usageMode: "expand",
                 },
             ],
             sectionDepth: 1,
         },
-
         {
-            name: "Customization Context",
-            components: [
-                "src/context/customizationContext/CustomizationContext.js",
-            ],
-            exampleMode: "expand",
-            usageMode: "expand",
-        },
-        {
-            name: "Bootstrap components",
+            name: "Bootstrap Components",
             description: "Set of bootstrap components.",
             components: "src/bootstrap/*.js",
             exampleMode: "expand",
@@ -68,13 +65,22 @@ module.exports = {
             ignore: ["src/bootstrap/constants.js", "src/bootstrap/Radio.js"],
             sectionDepth: 0,
         },
+        {
+            name: "Contexts",
+            components: [
+                "src/context/alertContext/AlertContext.js",
+                "src/context/customizationContext/CustomizationContext.js",
+            ],
+            exampleMode: "expand",
+            usageMode: "expand",
+        },
     ],
     template: {
         favicon: "/docs/components/logo.svg",
     },
     require: [
         "babel-polyfill",
-        path.join(__dirname, "src/testUtils/mockGlobals"),
+        path.join(__dirname, "src/testUtils/mockGlobals.js"),
         path.join(
             __dirname,
             "node_modules/bootstrap/dist/css/bootstrap.min.css"