diff --git a/src/common/RebootButton.js b/src/common/RebootButton.js
index 9b9f85e..380b30d 100644
--- a/src/common/RebootButton.js
+++ b/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 }) {
{_("Are you sure you want to restart the router?")}
-
+
diff --git a/src/common/RebootButton.md b/src/common/RebootButton.md
new file mode 100644
index 0000000..58a328a
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
+
+;
+```
diff --git a/src/common/RichTable/RichTable.js b/src/common/RichTable/RichTable.js
index a45451a..98e42eb 100644
--- a/src/common/RichTable/RichTable.js
+++ b/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 = ({
)}
);
-};
+}
export default RichTable;
diff --git a/src/common/RichTable/RichTable.md b/src/common/RichTable/RichTable.md
new file mode 100644
index 0000000..16a496c
--- /dev/null
+++ b/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",
+ },
+];
+
+;
+```
diff --git a/styleguide.config.js b/styleguide.config.js
index cdb6d8b..2a701f7 100644
--- a/styleguide.config.js
+++ b/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"