GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-11-14 17:35:35 +01:00
Code Issues Releases Activity

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

Browse Source 
Add RichTable component

See merge request turris/reforis/foris-js!253
This commit is contained in:
Aleksandr Gumroian 2024-11-08 17:59:34 +01:00
commit f3f9f04974
14 changed files with 598 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
package-lock.json generated
View File

@ -13,6 +13,7 @@
"@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",
@ -3583,6 +3584,39 @@
"@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",
@ -15493,7 +15527,6 @@
"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",
@ -16247,7 +16280,6 @@
"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"
@ -21102,6 +21134,19 @@
"@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",
@ -30083,7 +30128,6 @@
"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",
@ -30648,7 +30692,6 @@
"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"

1
package.json
View File

@ -18,6 +18,7 @@
"@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",

12
src/common/RebootButton.js
View File

@ -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>

24
src/common/RebootButton.md Normal file
View File

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

84
src/common/RichTable/RichTable.js Normal file
View File

@ -0,0 +1,84 @@
/*
* 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;

135
src/common/RichTable/RichTable.md Normal file
View File

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

48
src/common/RichTable/RichTableBody.js Normal file
View File

@ -0,0 +1,48 @@
/*
* 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;

96
src/common/RichTable/RichTableHeader.js Normal file
View File

@ -0,0 +1,96 @@
/*
* 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;

128
src/common/RichTable/RichTablePagination.js Normal file
View File

@ -0,0 +1,128 @@
/*
* 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;

2
src/common/__tests__/__snapshots__/RebootButton.test.js.snap
View File

@ -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>

1
src/index.js
View File

@ -43,6 +43,7 @@ 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 {

2
src/testUtils/customTestRender.js
View File

@ -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([

0
src/testUtils/cutomizationContextMock.js → src/testUtils/customizationContextMock.js
View File

36
styleguide.config.js
View File

@ -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"