package-lock.json

@@ -13,7 +13,6 @@
                 "@fortawesome/free-regular-svg-icons": "^6.6.0",
                 "@fortawesome/free-solid-svg-icons": "^6.6.0",
                 "@fortawesome/react-fontawesome": "^0.2.2",
-                "@tanstack/react-table": "^8.20.5",
                 "axios": "^1.7.2",
                 "immutability-helper": "^3.1.1",
                 "moment": "^2.30.1",
@@ -3584,39 +3583,6 @@
                 "@sinonjs/commons": "^3.0.0"
             }
         },
-        "node_modules/@tanstack/react-table": {
-            "version": "8.20.5",
-            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
-            "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
-            "license": "MIT",
-            "dependencies": {
-                "@tanstack/table-core": "8.20.5"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/tannerlinsley"
-            },
-            "peerDependencies": {
-                "react": ">=16.8",
-                "react-dom": ">=16.8"
-            }
-        },
-        "node_modules/@tanstack/table-core": {
-            "version": "8.20.5",
-            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
-            "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
-            "license": "MIT",
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/tannerlinsley"
-            }
-        },
         "node_modules/@testing-library/dom": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz",
@@ -15527,6 +15493,7 @@
             "version": "16.9.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
             "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
+            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1",
@@ -16280,6 +16247,7 @@
             "version": "0.15.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
             "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
+            "dev": true,
             "dependencies": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1"
@@ -21134,19 +21102,6 @@
                 "@sinonjs/commons": "^3.0.0"
             }
         },
-        "@tanstack/react-table": {
-            "version": "8.20.5",
-            "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
-            "integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
-            "requires": {
-                "@tanstack/table-core": "8.20.5"
-            }
-        },
-        "@tanstack/table-core": {
-            "version": "8.20.5",
-            "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
-            "integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg=="
-        },
         "@testing-library/dom": {
             "version": "5.6.1",
             "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz",
@@ -30128,6 +30083,7 @@
             "version": "16.9.0",
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
             "integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
+            "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1",
@@ -30692,6 +30648,7 @@
             "version": "0.15.0",
             "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
             "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
+            "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1"

package.json

@@ -18,7 +18,6 @@
         "@fortawesome/free-regular-svg-icons": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@tanstack/react-table": "^8.20.5",
         "axios": "^1.7.2",
         "immutability-helper": "^3.1.1",
         "moment": "^2.30.1",

src/common/RebootButton.js

@@ -16,11 +16,6 @@ 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);
@@ -73,12 +68,7 @@ function RebootModal({ shown, setShown, onReboot }) {
                 <p>{_("Are you sure you want to restart the router?")}</p>
             </ModalBody>
             <ModalFooter>
-                <Button
+                <Button onClick={() => setShown(false)}>{_("Cancel")}</Button>
-                    className="btn-secondary"
-                    onClick={() => setShown(false)}
-                >
-                    {_("Cancel")}
-                </Button>
                 <Button className="btn-danger" onClick={onReboot}>
                     {_("Confirm reboot")}
                 </Button>

src/common/RebootButton.md

@@ -1,24 +0,0 @@
-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

@@ -1,84 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useMemo, useState } from "react";
-
-import {
-    flexRender,
-    getCoreRowModel,
-    getSortedRowModel,
-    getPaginationRowModel,
-    useReactTable,
-} from "@tanstack/react-table";
-import PropTypes from "prop-types";
-
-import RichTableBody from "./RichTableBody";
-import RichTableHeader from "./RichTableHeader";
-import RichTablePagination from "./RichTablePagination";
-
-const fallbackData = [];
-
-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, [columns]);
-    const [tableData] = useState(data ?? fallbackData);
-    const [sorting, setSorting] = useState([]);
-    const [pagination, setPagination] = useState({
-        pageIndex,
-        pageSize,
-    });
-
-    const table = useReactTable({
-        data: tableData,
-        columns: tableColumns,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onPaginationChange: setPagination,
-        onSortingChange: setSorting,
-        state: {
-            sorting,
-            pagination,
-        },
-    });
-
-    return (
-        <div className="table-responsive">
-            <table className="table table-hover text-nowrap">
-                <RichTableHeader table={table} flexRender={flexRender} />
-                <RichTableBody table={table} flexRender={flexRender} />
-            </table>
-            {withPagination && (
-                <RichTablePagination
-                    table={table}
-                    tablePageSize={pageSize}
-                    allRows={tableData.length}
-                />
-            )}
-        </div>
-    );
-}
-
-export default RichTable;

src/common/RichTable/RichTable.md

@@ -1,135 +0,0 @@
-### 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

@@ -1,48 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-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) => {
-                return (
-                    <tr key={row.id} className="align-middle">
-                        {row.getVisibleCells().map((cell) => {
-                            return (
-                                <td
-                                    key={cell.id}
-                                    {...(cell.column.columnDef.className && {
-                                        className:
-                                            cell.column.columnDef.className,
-                                    })}
-                                >
-                                    {flexRender(
-                                        cell.column.columnDef.cell,
-                                        cell.getContext()
-                                    )}
-                                </td>
-                            );
-                        })}
-                    </tr>
-                );
-            })}
-        </tbody>
-    );
-}
-
-export default RichTableBody;

src/common/RichTable/RichTableHeader.js

@@ -1,96 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import {
-    faSquareCaretUp,
-    faSquareCaretDown,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import propTypes from "prop-types";
-
-RichTableHeader.propTypes = {
-    table: propTypes.shape({
-        getHeaderGroups: propTypes.func.isRequired,
-    }).isRequired,
-    flexRender: propTypes.func.isRequired,
-};
-
-function RichTableHeader({ table, flexRender }) {
-    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">
-            {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id} role="row">
-                    {headerGroup.headers.map((header) => (
-                        <th
-                            key={header.id}
-                            colSpan={header.colSpan}
-                            {...(header.column.columnDef.headerClassName && {
-                                className:
-                                    header.column.columnDef.headerClassName,
-                            })}
-                        >
-                            {header.isPlaceholder ||
-                            header.column.columnDef.headerIsHidden ? (
-                                <div className="d-none" aria-hidden="true">
-                                    {flexRender(
-                                        header.column.columnDef.header,
-                                        header.getContext()
-                                    )}
-                                </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()
-                                                            ? "d-flex align-items-center"
-                                                            : ""
-                                                    }
-                                                `}
-                                    onClick={header.column.getToggleSortingHandler()}
-                                    title={getThTitle(header)}
-                                >
-                                    {flexRender(
-                                        header.column.columnDef.header,
-                                        header.getContext()
-                                    )}
-                                    {{
-                                        asc: (
-                                            <FontAwesomeIcon
-                                                icon={faSquareCaretUp}
-                                                className="ms-1 text-primary"
-                                            />
-                                        ),
-                                        desc: (
-                                            <FontAwesomeIcon
-                                                icon={faSquareCaretDown}
-                                                className="ms-1 text-primary"
-                                            />
-                                        ),
-                                    }[header.column.getIsSorted()] ?? null}
-                                </button>
-                            )}
-                        </th>
-                    ))}
-                </tr>
-            ))}
-        </thead>
-    );
-}
-
-export default RichTableHeader;

src/common/RichTable/RichTablePagination.js

@@ -1,128 +0,0 @@
-/*
- * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React, { useMemo } from "react";
-
-import {
-    faAngleLeft,
-    faAnglesLeft,
-    faAngleRight,
-    faAnglesRight,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import propTypes from "prop-types";
-
-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();
-
-    const pageSizes = useMemo(() => {
-        return [tablePageSize ?? 5, 10, 25].filter(
-            (value, index, self) => self.indexOf(value) === index
-        );
-    }, [tablePageSize]);
-
-    const renderPaginationButton = (icon, ariaLabel, onClick, disabled) => (
-        <li
-            className={`page-item ${disabled ? "disabled" : ""}`}
-            style={{ cursor: disabled ? "not-allowed" : "pointer" }}
-        >
-            <button
-                type="button"
-                className="page-link"
-                aria-label={ariaLabel}
-                onClick={onClick}
-                disabled={disabled}
-            >
-                <FontAwesomeIcon icon={icon} />
-            </button>
-        </li>
-    );
-
-    return (
-        <nav
-            aria-label={_("Pagination navigation bar")}
-            className="d-flex gap-2 justify-content-start align-items-center mx-2 mb-1 text-nowrap"
-        >
-            <ul className="pagination pagination-sm mb-0">
-                {renderPaginationButton(
-                    faAnglesLeft,
-                    _("First page"),
-                    () => table.firstPage(),
-                    prevPagBtnDisabled
-                )}
-                {renderPaginationButton(
-                    faAngleLeft,
-                    _("Previous page"),
-                    () => table.previousPage(),
-                    prevPagBtnDisabled
-                )}
-                {renderPaginationButton(
-                    faAngleRight,
-                    _("Next page"),
-                    () => table.nextPage(),
-                    nextPagBtnDisabled
-                )}
-                {renderPaginationButton(
-                    faAnglesRight,
-                    _("Last page"),
-                    () => table.lastPage(),
-                    nextPagBtnDisabled
-                )}
-            </ul>
-            <span>
-                {_("Page")}&nbsp;
-                <span className="fw-bold">
-                    {pagination.pageIndex + 1}
-                    &nbsp;{_("of")}&nbsp;
-                    {table.getPageCount().toLocaleString()}
-                </span>
-            </span>
-            <div
-                className="vr mx-1 align-self-center"
-                style={{ height: "1.5rem" }}
-            />
-            <span>{_("Rows per page:")}</span>
-            <select
-                className="form-select form-select-sm w-auto"
-                aria-label={_("Select rows per page")}
-                value={pagination.pageSize}
-                onChange={(e) => {
-                    table.setPageSize(Number(e.target.value));
-                }}
-            >
-                {pageSizes.map((pageSize) => (
-                    <option key={pageSize} value={pageSize}>
-                        {pageSize}
-                    </option>
-                ))}
-                <option key={allRows} value={allRows}>
-                    {_("All")}
-                </option>
-            </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-secondary d-inline-flex justify-content-center align-items-center"
+              class="btn btn-primary d-inline-flex justify-content-center align-items-center"
               type="button"
             >
               <span>

src/index.js

@@ -43,7 +43,6 @@ export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
 export { default as RebootButton } from "./common/RebootButton";
 export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
 export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
-export { default as RichTable } from "./common/RichTable/RichTable";
 // Form
 export { default as ForisForm } from "./form/components/ForisForm";
 export {

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 "./customizationContextMock";
+import { CustomizationContextMock } from "./cutomizationContextMock";
 
 Wrapper.propTypes = {
     children: PropTypes.oneOfType([

styleguide.config.js

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