Merge branch 'add-tanstack-and-richtable-component' into 'dev'

Add RichTable component

See merge request turris/reforis/foris-js!253

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,15 +22,28 @@ 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,
     pageSize = 5,
     pageIndex = 0,
-}) => {
+}) {
-    const tableColumns = useMemo(() => columns, []);
+    const tableColumns = useMemo(() => columns, [columns]);
-    const [tableData, _] = useState(data ?? fallbackData);
+    const [tableData] = useState(data ?? fallbackData);
     const [sorting, setSorting] = useState([]);
     const [pagination, setPagination] = useState({
         pageIndex,
@@ -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 />;
+```

src/common/RichTable/RichTableBody.js

@@ -7,7 +7,16 @@
 
 import React from "react";
 
-const RichTableBody = ({ table, flexRender }) => {
+import propTypes from "prop-types";
+
+RichTableBody.propTypes = {
+    table: propTypes.shape({
+        getRowModel: propTypes.func.isRequired,
+    }).isRequired,
+    flexRender: propTypes.func.isRequired,
+};
+
+function RichTableBody({ table, flexRender }) {
     return (
         <tbody>
             {table.getRowModel().rows.map((row) => {
@@ -34,6 +43,6 @@ const RichTableBody = ({ table, flexRender }) => {
             })}
         </tbody>
     );
-};
+}
 
 export default RichTableBody;

src/common/RichTable/RichTableHeader.js

@@ -6,21 +6,30 @@
  */
 
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
     faSquareCaretUp,
     faSquareCaretDown,
 } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import propTypes from "prop-types";
 
-const RichTableHeader = ({ table, flexRender }) => {
+RichTableHeader.propTypes = {
-    const getThTitle = (header) =>
+    table: propTypes.shape({
-        header.column.getCanSort()
+        getHeaderGroups: propTypes.func.isRequired,
-            ? header.column.getNextSortingOrder() === "asc"
+    }).isRequired,
-                ? _("Sort ascending")
+    flexRender: propTypes.func.isRequired,
-                : header.column.getNextSortingOrder() === "desc"
+};
-                  ? _("Sort descending")
+
-                  : _("Clear sort")
+function RichTableHeader({ table, flexRender }) {
-            : undefined;
+    const getThTitle = (header) => {
+        if (!header.column.getCanSort()) return undefined;
+
+        const nextSortingOrder = header.column.getNextSortingOrder();
+        if (nextSortingOrder === "asc") return _("Sort ascending");
+        if (nextSortingOrder === "desc") return _("Sort descending");
+        return _("Clear sort");
+    };
 
     return (
         <thead className="thead-light">
@@ -45,6 +54,7 @@ const RichTableHeader = ({ table, flexRender }) => {
                                 </div>
                             ) : (
                                 <button
+                                    type="button"
                                     className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
                                                     ${
                                                         header.column.getCanSort()
@@ -81,6 +91,6 @@ const RichTableHeader = ({ table, flexRender }) => {
             ))}
         </thead>
     );
-};
+}
 
 export default RichTableHeader;

src/common/RichTable/RichTablePagination.js

@@ -6,15 +6,33 @@
  */
 
 import React, { useMemo } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
     faAngleLeft,
     faAnglesLeft,
     faAngleRight,
     faAnglesRight,
 } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import propTypes from "prop-types";
 
-const RichTablePagination = ({ table, tablePageSize, allRows }) => {
+RichTablePagination.propTypes = {
+    table: propTypes.shape({
+        getState: propTypes.func.isRequired,
+        getCanPreviousPage: propTypes.func.isRequired,
+        getCanNextPage: propTypes.func.isRequired,
+        firstPage: propTypes.func.isRequired,
+        previousPage: propTypes.func.isRequired,
+        nextPage: propTypes.func.isRequired,
+        lastPage: propTypes.func.isRequired,
+        setPageSize: propTypes.func.isRequired,
+        getPageCount: propTypes.func.isRequired,
+    }).isRequired,
+    tablePageSize: propTypes.number,
+    allRows: propTypes.number,
+};
+
+function RichTablePagination({ table, tablePageSize, allRows }) {
     const { pagination } = table.getState();
     const prevPagBtnDisabled = !table.getCanPreviousPage();
     const nextPagBtnDisabled = !table.getCanNextPage();
@@ -31,6 +49,7 @@ const RichTablePagination = ({ table, tablePageSize, allRows }) => {
             style={{ cursor: disabled ? "not-allowed" : "pointer" }}
         >
             <button
+                type="button"
                 className="page-link"
                 aria-label={ariaLabel}
                 onClick={onClick}
@@ -104,6 +123,6 @@ const RichTablePagination = ({ table, tablePageSize, allRows }) => {
             </select>
         </nav>
     );
-};
+}
 
 export default RichTablePagination;

src/common/__tests__/__snapshots__/RebootButton.test.js.snap

@@ -43,7 +43,7 @@ exports[`<RebootButton/> Render modal. 1`] = `
             class="modal-footer"
           >
             <button
-              class="btn btn-primary d-inline-flex justify-content-center align-items-center"
+              class="btn btn-secondary d-inline-flex justify-content-center align-items-center"
               type="button"
             >
               <span>

src/testUtils/customTestRender.js

@@ -14,7 +14,7 @@ import { render } from "@testing-library/react";
 import PropTypes from "prop-types";
 
 import { AlertContextMock } from "./alertContextMock";
-import { CustomizationContextMock } from "./cutomizationContextMock";
+import { CustomizationContextMock } from "./customizationContextMock";
 
 Wrapper.propTypes = {
     children: PropTypes.oneOfType([

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",
+                    name: "Rich Table",
-                    components: ["src/context/alertContext/AlertContext.js"],
+                    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",
+            name: "Bootstrap Components",
-            components: [
-                "src/context/customizationContext/CustomizationContext.js",
-            ],
-            exampleMode: "expand",
-            usageMode: "expand",
-        },
-        {
-            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"