From 8e845964c6f050c07f88a4714e626d79ec22ab10 Mon Sep 17 00:00:00 2001 From: Lennart Bank Date: Tue, 12 Sep 2023 14:28:42 +0200 Subject: [PATCH 1/4] INIT new TableWrapper component --- .../tableWrapper/TableWrapper.module.css | 37 +-- .../components/tableWrapper/TableWrapper.tsx | 60 +---- .../TableOrganizationDisplayTemplate.tsx | 2 +- .../table/TableResultTemplate.tsx | 225 +++++++++--------- 4 files changed, 118 insertions(+), 206 deletions(-) diff --git a/pwa/src/components/tableWrapper/TableWrapper.module.css b/pwa/src/components/tableWrapper/TableWrapper.module.css index e2d85420a..34e907ad5 100644 --- a/pwa/src/components/tableWrapper/TableWrapper.module.css +++ b/pwa/src/components/tableWrapper/TableWrapper.module.css @@ -1,33 +1,12 @@ -.table { - width: 100%; - overflow-x: auto; +.wrapper { + overflow-x: scroll; } -.tableBoxShadow { - position: relative; - z-index: 1; +/* Hide scrollbar */ +.wrapper::-webkit-scrollbar { + display: none; } - -.tableBoxShadow::before { - content: ""; - position: absolute; - pointer-events: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 2; - transition: 0.2s all ease-in; -} - -.tableBoxShadowR::before { - box-shadow: inset 0px 0px 10px -10px rgba(0, 0, 0, 0.2), inset -16px 0px 10px -10px rgba(0, 0, 0, 0.2); -} - -.tableBoxShadowL::before { - box-shadow: inset 16px 0px 10px -10px rgba(0, 0, 0, 0.2), inset -0px 0px 10px -10px rgba(0, 0, 0, 0.2); -} - -.tableBoxShadowM::before { - box-shadow: inset 16px 0px 10px -10px rgba(0, 0, 0, 0.2), inset -16px 0px 10px -10px rgba(0, 0, 0, 0.2); +.wrapper { + -ms-overflow-style: none; + scrollbar-width: none; } diff --git a/pwa/src/components/tableWrapper/TableWrapper.tsx b/pwa/src/components/tableWrapper/TableWrapper.tsx index d00964f92..a139835dc 100644 --- a/pwa/src/components/tableWrapper/TableWrapper.tsx +++ b/pwa/src/components/tableWrapper/TableWrapper.tsx @@ -1,62 +1,6 @@ import * as React from "react"; import * as styles from "./TableWrapper.module.css"; -import _ from "lodash"; -import clsx from "clsx"; -const TableWrapper = ({ children }: React.PropsWithChildren<{}>): JSX.Element => { - const [tableIsScrollable, setTableIsScrollable] = React.useState(false); - const [tableScrollPosition, setTableScrollPosition] = React.useState<"left" | "middle" | "right">("left"); - - const tableWrapperRef = React.useRef() as React.MutableRefObject; - - const isTableScrollable = () => { - if (!tableWrapperRef.current) return false; - - return tableWrapperRef.current.scrollWidth > tableWrapperRef.current.clientWidth; - }; - - React.useEffect(() => { - tableWrapperRef.current && setTableIsScrollable(isTableScrollable()); - }, [tableWrapperRef]); - - React.useEffect(() => { - if (!tableWrapperRef.current) return; - - const handleWindowResize = _.debounce(() => { - setTableIsScrollable(isTableScrollable()); - setScrollPosition(); - }, 80); - - window.addEventListener("resize", handleWindowResize); - - () => window.removeEventListener("resize", handleWindowResize); - }, []); - - const setScrollPosition = () => { - const maxScrollLeft = tableWrapperRef?.current?.scrollWidth - tableWrapperRef?.current?.clientWidth; - - if (tableWrapperRef?.current?.scrollLeft === 0) setTableScrollPosition("left"); - else if (tableWrapperRef?.current?.scrollLeft === maxScrollLeft) setTableScrollPosition("right"); - else setTableScrollPosition("middle"); - }; - - return ( -
- {/* @ts-ignore */} -
- {children} -
-
- ); +export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => { + return
{children}
; }; - -export default TableWrapper; diff --git a/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx b/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx index 07deddb2f..d0f4b4e40 100644 --- a/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx +++ b/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx @@ -14,7 +14,7 @@ import { } from "@utrecht/component-library-react/dist/css-module"; import { IconArrowRight } from "@tabler/icons-react"; import { getResultsUrl } from "../../../../services/getResultsUrl"; -import TableWrapper from "../../../../components/tableWrapper/TableWrapper"; +import { TableWrapper } from "../../../../components/tableWrapper/TableWrapper"; import { Link } from "../../../../components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGlobe, faHouseLaptop, faInfoCircle, faRepeat, faUserCog } from "@fortawesome/free-solid-svg-icons"; diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx index 299cd90b6..62653a743 100644 --- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx +++ b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx @@ -15,7 +15,6 @@ import { import { IconArrowRight } from "@tabler/icons-react"; import clsx from "clsx"; import { getResultsUrl } from "../../../../services/getResultsUrl"; -import TableWrapper from "../../../../components/tableWrapper/TableWrapper"; import { getTypeFromSchemaRef } from "../../../../services/getTypeFromSchemaRef"; import { Link } from "../../../../components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -69,131 +68,121 @@ export const TableResultTemplate: React.FC = ({ compon }; return ( - - - {!hideTableHead && ( - - - {t("Name")} - {t("Type")} - {t("Layer")} - {t("Sources")} - {t("Software type")} - {t("Status")} - - - - )} +
+ {!hideTableHead && ( + + + {t("Name")} + {t("Type")} + {t("Layer")} + {t("Sources")} + {t("Software type")} + {t("Status")} + + + + )} - - {components.length > 0 && - components.map((component) => ( - navigate(`/${getResultsUrl(component._self?.schema.ref)}/${component.id}`)} - > - - {component.name} - - {t(_.upperFirst(getTypeFromSchemaRef(component._self?.schema.ref)))} - -
- - {" "} - {t( - _.upperFirst( - component._self.schema.ref.includes("component.schema.json") - ? component.embedded?.nl?.embedded?.commonground.layerType ?? t("Unknown") - : "N.V.T.", + + {components.length > 0 && + components.map((component) => ( + navigate(`/${getResultsUrl(component._self?.schema.ref)}/${component.id}`)} + > + + {component.name} + + {t(_.upperFirst(getTypeFromSchemaRef(component._self?.schema.ref)))} + +
-
- - - - - {_.upperFirst( - component._self?.synchronizations - ? component._self?.synchronizations?.length - ? component._self?.synchronizations?.at(-1)?.source.name - : "Onbekend" - : "N.V.T.", + ) + ], + )} + > + + {" "} + {t( + _.upperFirst( + component._self.schema.ref.includes("component.schema.json") + ? component.embedded?.nl?.embedded?.commonground.layerType ?? t("Unknown") + : "N.V.T.", + ), )} - +
+ - - - {_.upperFirst( - component._self.schema.ref.includes("component.schema.json") - ? component.softwareType ?? "Onbekend" - : "N.V.T.", - )} - - + + + {_.upperFirst( + component._self?.synchronizations + ? component._self?.synchronizations?.length + ? component._self?.synchronizations?.at(-1)?.source.name + : "Onbekend" + : "N.V.T.", + )} + + - - - + + + {_.upperFirst( + component._self.schema.ref.includes("component.schema.json") + ? component.softwareType ?? "Onbekend" + : "N.V.T.", + )} + + - - - - - - {t("Details")} - - - - ))} + + + - {!components.length && ( - - {t("Geen resultaten gevonden")} - - - - - - + + + + + + {t("Details")} + + - )} - -
- + ))} + + {!components.length && ( + + {t("Geen resultaten gevonden")} + + + + + + + + )} + + ); }; From 2bb1c6fd820fb8449654385fa72818ccf41487e9 Mon Sep 17 00:00:00 2001 From: Lennart Bank Date: Tue, 12 Sep 2023 15:15:39 +0200 Subject: [PATCH 2/4] INIT buttons scroll --- .../tableWrapper/TableWrapper.module.css | 18 +++++++ .../components/tableWrapper/TableWrapper.tsx | 50 ++++++++++++++++++- 2 files changed, 66 insertions(+), 2 deletions(-) diff --git a/pwa/src/components/tableWrapper/TableWrapper.module.css b/pwa/src/components/tableWrapper/TableWrapper.module.css index 34e907ad5..810fea8b0 100644 --- a/pwa/src/components/tableWrapper/TableWrapper.module.css +++ b/pwa/src/components/tableWrapper/TableWrapper.module.css @@ -1,7 +1,25 @@ +.container { + position: relative; +} + .wrapper { overflow-x: scroll; } +.scrollRightButton, +.scrollLeftButton { + top: 50%; + position: absolute; +} + +.scrollRightButton { + right: 0; +} + +.scrollLeftButton { + left: 0; +} + /* Hide scrollbar */ .wrapper::-webkit-scrollbar { display: none; diff --git a/pwa/src/components/tableWrapper/TableWrapper.tsx b/pwa/src/components/tableWrapper/TableWrapper.tsx index a139835dc..1fed1c3c5 100644 --- a/pwa/src/components/tableWrapper/TableWrapper.tsx +++ b/pwa/src/components/tableWrapper/TableWrapper.tsx @@ -1,6 +1,52 @@ -import * as React from "react"; +import React, { useState, useEffect } from "react"; import * as styles from "./TableWrapper.module.css"; +import { Button } from "@utrecht/component-library-react"; export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => { - return
{children}
; + const [canScrollRight, setCanScrollRight] = useState(false); + const [canScrollLeft, setCanScrollLeft] = useState(false); + + const wrapperRef = React.useRef(null); + + const handleScroll = () => { + if (wrapperRef.current) { + setCanScrollLeft(wrapperRef.current.scrollLeft > 0); + setCanScrollRight( + wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth, + ); + } + }; + + const handleScrollRight = () => { + if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" }); + }; + + const handleScrollLeft = () => { + if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" }); + }; + + useEffect(() => { + if (wrapperRef.current) { + setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll + } + }, []); + + return ( +
+
+ {children} +
+ + {canScrollLeft && ( +
+ +
+ )} + {canScrollRight && ( +
+ +
+ )} +
+ ); }; From cea8898f0c977543c890acfb56bee52e248c6733 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 19 Sep 2023 17:02:56 +0200 Subject: [PATCH 3/4] added tableWrapper from component package --- pwa/package-lock.json | 187 +++------------ pwa/package.json | 6 +- pwa/src/components/index.ts | 1 - .../tableWrapper/TableWrapper.module.css | 30 --- .../components/tableWrapper/TableWrapper.tsx | 52 ---- .../TableOrganizationDisplayTemplate.tsx | 6 +- .../table/TableResultTemplate.tsx | 227 +++++++++--------- pwa/static/themes/rotterdam.css | 14 ++ pwa/static/themes/theme.css.example | 14 ++ pwa/static/themes/utrecht.css | 16 ++ 10 files changed, 206 insertions(+), 347 deletions(-) delete mode 100644 pwa/src/components/tableWrapper/TableWrapper.module.css delete mode 100644 pwa/src/components/tableWrapper/TableWrapper.tsx diff --git a/pwa/package-lock.json b/pwa/package-lock.json index d6597a4b9..65cfe2256 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,7 +8,7 @@ "name": "skeleton-pip", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.5", + "@conduction/components": "2.2.7", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", @@ -67,6 +67,35 @@ "typescript": "^4.6.3" } }, + "../../conduction-components": { + "name": "@conduction/components", + "version": "2.2.7", + "license": "ISC", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", + "@utrecht/component-library-react": "^1.0.0-alpha.319", + "clsx": "^1.1.1", + "gatsby": "^4.11.1", + "react": "^18.2.0", + "react-datepicker": "^4.10.0", + "react-hook-form": "7.29.0", + "react-paginate": "^8.2.0", + "react-select": "5.3.2", + "react-tabs": "^6.0.2", + "react-tooltip": "^5.21.3" + }, + "devDependencies": { + "@types/node": "^17.0.23", + "@types/react": "^18.2.0", + "@types/react-datepicker": "^4.8.0", + "@types/react-dom": "^18.2.0", + "rimraf": "^4.4.0", + "tsc-hooks": "^1.1.1", + "typescript": "^4.6.3" + } + }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "license": "Apache-2.0", @@ -1831,59 +1860,8 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.5.tgz", - "integrity": "sha512-BDKLQqikLM14hyJupR4Ww8uEFbN8g7DTPxAQIkBt8HZ8xpAMk08tx+LZfg/Lzz7b/VtcAC8+8J6cvBHopgCnTA==", - "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.2.0", - "@fortawesome/free-solid-svg-icons": "^6.2.0", - "@fortawesome/react-fontawesome": "^0.2.0", - "@utrecht/component-library-react": "^1.0.0-alpha.319", - "clsx": "^1.1.1", - "gatsby": "^4.11.1", - "react": "^18.2.0", - "react-datepicker": "^4.10.0", - "react-hook-form": "7.29.0", - "react-paginate": "^8.2.0", - "react-select": "5.3.2", - "react-tabs": "^6.0.2", - "react-tooltip": "^5.21.3" - } - }, - "node_modules/@conduction/components/node_modules/@fortawesome/react-fontawesome": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", - "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", - "dependencies": { - "prop-types": "^15.8.1" - }, - "peerDependencies": { - "@fortawesome/fontawesome-svg-core": "~1 || ~6", - "react": ">=16.3" - } - }, - "node_modules/@conduction/components/node_modules/memoize-one": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", - "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" - }, - "node_modules/@conduction/components/node_modules/react-select": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz", - "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==", - "dependencies": { - "@babel/runtime": "^7.12.0", - "@emotion/cache": "^11.4.0", - "@emotion/react": "^11.8.1", - "@types/react-transition-group": "^4.4.0", - "memoize-one": "^5.0.0", - "prop-types": "^15.6.0", - "react-transition-group": "^4.3.0" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } + "resolved": "../../conduction-components", + "link": true }, "node_modules/@egjs/hammerjs": { "version": "2.0.17", @@ -3615,15 +3593,6 @@ } } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@sideway/address": { "version": "4.1.4", "license": "BSD-3-Clause", @@ -4252,6 +4221,7 @@ }, "node_modules/@utrecht/component-library-react": { "version": "1.0.0-alpha.319", + "dev": true, "license": "EUPL-1.2", "dependencies": { "clsx": "1.2.1", @@ -5584,11 +5554,6 @@ "version": "2.0.0", "license": "MIT" }, - "node_modules/classnames": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" - }, "node_modules/clean-stack": { "version": "2.2.0", "dev": true, @@ -11117,6 +11082,7 @@ }, "node_modules/lodash.chunk": { "version": "4.2.0", + "dev": true, "license": "MIT" }, "node_modules/lodash.clonedeep": { @@ -13560,23 +13526,6 @@ "react-dom": "~15 || ~16 || ~17 || ~18" } }, - "node_modules/react-datepicker": { - "version": "4.17.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.17.0.tgz", - "integrity": "sha512-z50H44XbnkYlns7gVHzHK4jWAzLfvQehh5Lvindb09J97yVJKIbsmHs98D0f77tdZc3dSYM7oAqsFY55dBeOGQ==", - "dependencies": { - "@popperjs/core": "^2.11.8", - "classnames": "^2.2.6", - "date-fns": "^2.30.0", - "prop-types": "^15.7.2", - "react-onclickoutside": "^6.13.0", - "react-popper": "^2.3.0" - }, - "peerDependencies": { - "react": "^16.9.0 || ^17 || ^18", - "react-dom": "^16.9.0 || ^17 || ^18" - } - }, "node_modules/react-dev-utils": { "version": "12.0.1", "license": "MIT", @@ -13737,19 +13686,6 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18" } }, - "node_modules/react-onclickoutside": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", - "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", - "funding": { - "type": "individual", - "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" - }, - "peerDependencies": { - "react": "^15.5.x || ^16.x || ^17.x || ^18.x", - "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" - } - }, "node_modules/react-paginate": { "version": "8.2.0", "license": "MIT", @@ -13760,20 +13696,6 @@ "react": "^16 || ^17 || ^18" } }, - "node_modules/react-popper": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", - "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", - "dependencies": { - "react-fast-compare": "^3.0.1", - "warning": "^4.0.2" - }, - "peerDependencies": { - "@popperjs/core": "^2.0.0", - "react": "^16.8.0 || ^17 || ^18", - "react-dom": "^16.8.0 || ^17 || ^18" - } - }, "node_modules/react-query": { "version": "3.39.3", "license": "MIT", @@ -13857,39 +13779,6 @@ "react": "^16.3.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-tabs": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", - "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==", - "dependencies": { - "clsx": "^2.0.0", - "prop-types": "^15.5.0" - }, - "peerDependencies": { - "react": "^18.0.0" - } - }, - "node_modules/react-tabs/node_modules/clsx": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", - "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", - "engines": { - "node": ">=6" - } - }, - "node_modules/react-tooltip": { - "version": "5.21.3", - "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.21.3.tgz", - "integrity": "sha512-z3Q+Uka4D6uYxfsssPqfx1W8vw7NIHyC2ZMq+NJkWg4EpUD3w7Fwz/o+dezyUQMCHL7nO/2sFbtWIrkyxktq2Q==", - "dependencies": { - "@floating-ui/dom": "^1.0.0", - "classnames": "^2.3.0" - }, - "peerDependencies": { - "react": ">=16.14.0", - "react-dom": ">=16.14.0" - } - }, "node_modules/react-transition-group": { "version": "4.4.5", "license": "BSD-3-Clause", @@ -15919,14 +15808,6 @@ "node": ">=0.10.0" } }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.0", "license": "MIT", diff --git a/pwa/package.json b/pwa/package.json index 009bb849c..5bcb68703 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -4,7 +4,9 @@ "private": true, "description": "skeleton-pip", "author": "Conduction", - "keywords": ["gatsby"], + "keywords": [ + "gatsby" + ], "scripts": { "develop": "gatsby develop", "start": "gatsby develop", @@ -21,7 +23,7 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.5", + "@conduction/components": "2.2.7", "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.1.18", diff --git a/pwa/src/components/index.ts b/pwa/src/components/index.ts index 931aa8c53..9a4a37d7b 100644 --- a/pwa/src/components/index.ts +++ b/pwa/src/components/index.ts @@ -6,4 +6,3 @@ export * from "./link/Link"; export * from "./organizationCard/OrganizationCard"; export * from "./pagination/pagination"; export * from "./resultsDisplaySwitch/ResultsDisplaySwitch"; -export * from "./tableWrapper/TableWrapper"; diff --git a/pwa/src/components/tableWrapper/TableWrapper.module.css b/pwa/src/components/tableWrapper/TableWrapper.module.css deleted file mode 100644 index 810fea8b0..000000000 --- a/pwa/src/components/tableWrapper/TableWrapper.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.container { - position: relative; -} - -.wrapper { - overflow-x: scroll; -} - -.scrollRightButton, -.scrollLeftButton { - top: 50%; - position: absolute; -} - -.scrollRightButton { - right: 0; -} - -.scrollLeftButton { - left: 0; -} - -/* Hide scrollbar */ -.wrapper::-webkit-scrollbar { - display: none; -} -.wrapper { - -ms-overflow-style: none; - scrollbar-width: none; -} diff --git a/pwa/src/components/tableWrapper/TableWrapper.tsx b/pwa/src/components/tableWrapper/TableWrapper.tsx deleted file mode 100644 index 1fed1c3c5..000000000 --- a/pwa/src/components/tableWrapper/TableWrapper.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useState, useEffect } from "react"; -import * as styles from "./TableWrapper.module.css"; -import { Button } from "@utrecht/component-library-react"; - -export const TableWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => { - const [canScrollRight, setCanScrollRight] = useState(false); - const [canScrollLeft, setCanScrollLeft] = useState(false); - - const wrapperRef = React.useRef(null); - - const handleScroll = () => { - if (wrapperRef.current) { - setCanScrollLeft(wrapperRef.current.scrollLeft > 0); - setCanScrollRight( - wrapperRef.current.scrollWidth - wrapperRef.current.scrollLeft > wrapperRef.current.clientWidth, - ); - } - }; - - const handleScrollRight = () => { - if (wrapperRef.current) wrapperRef.current.scrollTo({ left: wrapperRef.current.scrollWidth, behavior: "smooth" }); - }; - - const handleScrollLeft = () => { - if (wrapperRef.current) wrapperRef.current.scrollTo({ left: 0, behavior: "smooth" }); - }; - - useEffect(() => { - if (wrapperRef.current) { - setCanScrollRight(wrapperRef.current.scrollWidth > wrapperRef.current.clientWidth); // initiate scroll - } - }, []); - - return ( -
-
- {children} -
- - {canScrollLeft && ( -
- -
- )} - {canScrollRight && ( -
- -
- )} -
- ); -}; diff --git a/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx b/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx index d0f4b4e40..048f73f07 100644 --- a/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx +++ b/pwa/src/templates/templateParts/OrganizationDisplayTemplates/table/TableOrganizationDisplayTemplate.tsx @@ -14,13 +14,14 @@ import { } from "@utrecht/component-library-react/dist/css-module"; import { IconArrowRight } from "@tabler/icons-react"; import { getResultsUrl } from "../../../../services/getResultsUrl"; -import { TableWrapper } from "../../../../components/tableWrapper/TableWrapper"; +import { TableWrapper } from "@conduction/components"; import { Link } from "../../../../components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faGlobe, faHouseLaptop, faInfoCircle, faRepeat, faUserCog } from "@fortawesome/free-solid-svg-icons"; import { GitHubLogo } from "../../../../assets/svgs/GitHub"; import { GitLabLogo } from "../../../../assets/svgs/GitLab"; import { TOOLTIP_ID } from "../../../../layout/Layout"; +import { GatsbyContext } from "../../../../context/gatsby"; interface TableOrganizationDisplayTemplateProps { organizations: any[]; @@ -32,9 +33,10 @@ export const TableOrganizationDisplayTemplate: React.FC { const { t } = useTranslation(); + const { screenSize } = React.useContext(GatsbyContext); return ( - + {!hideTableHead && ( diff --git a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx index 62653a743..73c5c8e7a 100644 --- a/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx +++ b/pwa/src/templates/templateParts/resultsTemplates/table/TableResultTemplate.tsx @@ -17,9 +17,11 @@ import clsx from "clsx"; import { getResultsUrl } from "../../../../services/getResultsUrl"; import { getTypeFromSchemaRef } from "../../../../services/getTypeFromSchemaRef"; import { Link } from "../../../../components"; +import { TableWrapper } from "@conduction/components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faInfoCircle, faLayerGroup } from "@fortawesome/free-solid-svg-icons"; import { TOOLTIP_ID } from "../../../../layout/Layout"; +import { GatsbyContext } from "../../../../context/gatsby"; interface TableResultTemplateProps { components: any[]; @@ -28,6 +30,7 @@ interface TableResultTemplateProps { export const TableResultTemplate: React.FC = ({ components, hideTableHead }) => { const { t } = useTranslation(); + const { screenSize } = React.useContext(GatsbyContext); /** * Map component status to `StatusBadge` status @@ -68,121 +71,131 @@ export const TableResultTemplate: React.FC = ({ compon }; return ( -
- {!hideTableHead && ( - - - {t("Name")} - {t("Type")} - {t("Layer")} - {t("Sources")} - {t("Software type")} - {t("Status")} - - - - )} + +
+ {!hideTableHead && ( + + + {t("Name")} + {t("Type")} + {t("Layer")} + {t("Sources")} + {t("Software type")} + {t("Status")} + + + + )} - - {components.length > 0 && - components.map((component) => ( - navigate(`/${getResultsUrl(component._self?.schema.ref)}/${component.id}`)} - > - - {component.name} - - {t(_.upperFirst(getTypeFromSchemaRef(component._self?.schema.ref)))} - -
+ {components.length > 0 && + components.map((component) => ( + navigate(`/${getResultsUrl(component._self?.schema.ref)}/${component.id}`)} + > + + {component.name} + + {t(_.upperFirst(getTypeFromSchemaRef(component._self?.schema.ref)))} + +
+ + {" "} + {t( + _.upperFirst( + component._self.schema.ref.includes("component.schema.json") + ? component.embedded?.nl?.embedded?.commonground.layerType ?? t("Unknown") + : "N.V.T.", ), - ) - ], - )} - > - - {" "} - {t( - _.upperFirst( - component._self.schema.ref.includes("component.schema.json") - ? component.embedded?.nl?.embedded?.commonground.layerType ?? t("Unknown") - : "N.V.T.", - ), + )} + +
+ + + + + {_.upperFirst( + component._self?.synchronizations + ? component._self?.synchronizations?.length + ? component._self?.synchronizations?.at(-1)?.source.name + : "Onbekend" + : "N.V.T.", )} -
- + - - - {_.upperFirst( - component._self?.synchronizations - ? component._self?.synchronizations?.length - ? component._self?.synchronizations?.at(-1)?.source.name - : "Onbekend" - : "N.V.T.", - )} - - + + + {_.upperFirst( + component._self.schema.ref.includes("component.schema.json") + ? component.softwareType ?? "Onbekend" + : "N.V.T.", + )} + + - - - {_.upperFirst( - component._self.schema.ref.includes("component.schema.json") - ? component.softwareType ?? "Onbekend" - : "N.V.T.", - )} - - + + + - - - + + + + + + {t("Details")} + + + + ))} - - - - - - {t("Details")} - - + {!components.length && ( + + {t("Geen resultaten gevonden")} + + + + + + - ))} - - {!components.length && ( - - {t("Geen resultaten gevonden")} - - - - - - - - )} - -
+ )} + + + ); }; diff --git a/pwa/static/themes/rotterdam.css b/pwa/static/themes/rotterdam.css index bc5733007..aa1d858e2 100644 --- a/pwa/static/themes/rotterdam.css +++ b/pwa/static/themes/rotterdam.css @@ -240,6 +240,20 @@ --conduction-tabs-tab-panel-padding-inline-start: var(--web-app-size-lg); --conduction-tabs-tab-panel-padding-inline-end: var(--web-app-size-lg); + --conduction-tabs-scroll-button-hover-color: var(--rotterdam-color-green); + --conduction-tabs-scroll-button-hover-background-color: var(--web-app-color-white); + --conduction-tabs-scroll-button-color: #404b4f; + --conduction-tabs-scroll-button-background-color: var(--web-app-color-white); + + /* @conduction: TableWrapper */ + --conduction-table-wrapper-scroll-button-hover-color: var(--rotterdam-color-green); + --conduction-table-wrapper-scroll-button-hover-background-color: var(--web-app-color-white); + --conduction-table-wrapper-scroll-button-padding-inline-end: 14px; + --conduction-table-wrapper-scroll-button-padding-inline-start: 14px; + --conduction-table-wrapper-scroll-button-color: #404b4f; + --conduction-table-wrapper-scroll-button-background-color: var(--web-app-color-white); + + /* @gemeent-denhaag: SideNav */ --web-app-sidenav-link-active-color: var(--rotterdam-color-green); --web-app-sidenav-link-hover-color: var(--rotterdam-color-green); diff --git a/pwa/static/themes/theme.css.example b/pwa/static/themes/theme.css.example index bbffcd226..3b5e406e5 100644 --- a/pwa/static/themes/theme.css.example +++ b/pwa/static/themes/theme.css.example @@ -237,6 +237,20 @@ --conduction-tabs-tab-panel-padding-inline-start: var(--web-app-size-lg); --conduction-tabs-tab-panel-padding-inline-end: var(--web-app-size-lg); + --conduction-tabs-scroll-button-hover-color: var(--rotterdam-color-green); + --conduction-tabs-scroll-button-hover-background-color: var(--web-app-color-white); + --conduction-tabs-scroll-button-color: #404b4f; + --conduction-tabs-scroll-button-background-color: var(--web-app-color-white); + + /* @conduction: TableWrapper */ + --conduction-table-wrapper-scroll-button-hover-color: var(--rotterdam-color-green); + --conduction-table-wrapper-scroll-button-hover-background-color: var(--web-app-color-white); + --conduction-table-wrapper-scroll-button-padding-inline-end: 14px; + --conduction-table-wrapper-scroll-button-padding-inline-start: 14px; + --conduction-table-wrapper-scroll-button-color: #404b4f; + --conduction-table-wrapper-scroll-button-background-color: var(--web-app-color-white); + + /* @gemeent-denhaag: SideNav */ --web-app-sidenav-link-active-color: var(--rotterdam-color-green); --web-app-sidenav-link-hover-color: var(--rotterdam-color-green); diff --git a/pwa/static/themes/utrecht.css b/pwa/static/themes/utrecht.css index 305d2d603..1cf78c31f 100644 --- a/pwa/static/themes/utrecht.css +++ b/pwa/static/themes/utrecht.css @@ -238,6 +238,22 @@ --conduction-tabs-tab-panel-padding-inline-start: var(--web-app-size-lg); --conduction-tabs-tab-panel-padding-inline-end: var(--web-app-size-lg); + --conduction-tabs-scroll-button-hover-color: #000000; + --conduction-tabs-scroll-button-hover-background-color: var(--web-app-color-white); + --conduction-tabs-scroll-button-color: #000000b3; + --conduction-tabs-scroll-button-background-color: var(--web-app-color-white); + + /* @conduction: TableWrapper */ + --conduction-table-wrapper-scroll-button-hover-color: var(--web-app-color-link-active); + --conduction-table-wrapper-scroll-button-hover-background-color: var(--web-app-color-white); + --conduction-table-wrapper-scroll-button-padding-inline-end: 14px; + --conduction-table-wrapper-scroll-button-padding-inline-start: 14px; + --conduction-table-wrapper-scroll-button-color: #000000; + --conduction-table-wrapper-scroll-button-background-color: var(--web-app-color-white); + --conduction-table-wrapper-scroll-button-border-width: var(--web-app-size-4xs); + --conduction-table-wrapper-scroll-button-border-style: solid; + --conduction-table-wrapper-scroll-button-border-color: var(--web-app-color-disabled); + /* @gemeent-denhaag: SideNav */ --web-app-sidenav-link-active-color: var(--web-app-color-link-active); --web-app-sidenav-link-hover-color: var(--web-app-color-link-active); From 83faf3885ba6ffdc9b24213fd6e89269138a6660 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 20 Sep 2023 08:59:07 +0200 Subject: [PATCH 4/4] build fix --- pwa/package-lock.json | 188 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 153 insertions(+), 35 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 65cfe2256..c57519f77 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -67,35 +67,6 @@ "typescript": "^4.6.3" } }, - "../../conduction-components": { - "name": "@conduction/components", - "version": "2.2.7", - "license": "ISC", - "dependencies": { - "@fortawesome/fontawesome-svg-core": "^6.2.0", - "@fortawesome/free-solid-svg-icons": "^6.2.0", - "@fortawesome/react-fontawesome": "^0.2.0", - "@utrecht/component-library-react": "^1.0.0-alpha.319", - "clsx": "^1.1.1", - "gatsby": "^4.11.1", - "react": "^18.2.0", - "react-datepicker": "^4.10.0", - "react-hook-form": "7.29.0", - "react-paginate": "^8.2.0", - "react-select": "5.3.2", - "react-tabs": "^6.0.2", - "react-tooltip": "^5.21.3" - }, - "devDependencies": { - "@types/node": "^17.0.23", - "@types/react": "^18.2.0", - "@types/react-datepicker": "^4.8.0", - "@types/react-dom": "^18.2.0", - "rimraf": "^4.4.0", - "tsc-hooks": "^1.1.1", - "typescript": "^4.6.3" - } - }, "node_modules/@ampproject/remapping": { "version": "2.2.0", "license": "Apache-2.0", @@ -1860,8 +1831,59 @@ } }, "node_modules/@conduction/components": { - "resolved": "../../conduction-components", - "link": true + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.7.tgz", + "integrity": "sha512-2ATXfm5RpJ99nBb3ptF80jgJyh9OCTnyfPpRFznfe7KyqBvVJzVXOn7Y+obunkd2YYT56UA1O7Ts1rNRQw3w8w==", + "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", + "@utrecht/component-library-react": "^1.0.0-alpha.319", + "clsx": "^1.1.1", + "gatsby": "^4.11.1", + "react": "^18.2.0", + "react-datepicker": "^4.10.0", + "react-hook-form": "7.29.0", + "react-paginate": "^8.2.0", + "react-select": "5.3.2", + "react-tabs": "^6.0.2", + "react-tooltip": "^5.21.3" + } + }, + "node_modules/@conduction/components/node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, + "node_modules/@conduction/components/node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, + "node_modules/@conduction/components/node_modules/react-select": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz", + "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^5.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } }, "node_modules/@egjs/hammerjs": { "version": "2.0.17", @@ -3593,6 +3615,15 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sideway/address": { "version": "4.1.4", "license": "BSD-3-Clause", @@ -4221,7 +4252,6 @@ }, "node_modules/@utrecht/component-library-react": { "version": "1.0.0-alpha.319", - "dev": true, "license": "EUPL-1.2", "dependencies": { "clsx": "1.2.1", @@ -5554,6 +5584,11 @@ "version": "2.0.0", "license": "MIT" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-stack": { "version": "2.2.0", "dev": true, @@ -6374,8 +6409,7 @@ }, "node_modules/date-fns": { "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.21.0" }, @@ -11082,7 +11116,6 @@ }, "node_modules/lodash.chunk": { "version": "4.2.0", - "dev": true, "license": "MIT" }, "node_modules/lodash.clonedeep": { @@ -13526,6 +13559,23 @@ "react-dom": "~15 || ~16 || ~17 || ~18" } }, + "node_modules/react-datepicker": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.18.0.tgz", + "integrity": "sha512-0MYt3HmLbHVk1sw4v+RCbLAVg5TA3jWP7RyjZbo53PC+SEi+pjdgc92lB53ai/ENZaTOhbXmgni9GzvMrorMAw==", + "dependencies": { + "@popperjs/core": "^2.11.8", + "classnames": "^2.2.6", + "date-fns": "^2.30.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.13.0", + "react-popper": "^2.3.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "license": "MIT", @@ -13686,6 +13736,19 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18" } }, + "node_modules/react-onclickoutside": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", + "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x || ^18.x", + "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" + } + }, "node_modules/react-paginate": { "version": "8.2.0", "license": "MIT", @@ -13696,6 +13759,20 @@ "react": "^16 || ^17 || ^18" } }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-query": { "version": "3.39.3", "license": "MIT", @@ -13779,6 +13856,39 @@ "react": "^16.3.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-tabs": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", + "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==", + "dependencies": { + "clsx": "^2.0.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, + "node_modules/react-tabs/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, + "node_modules/react-tooltip": { + "version": "5.21.4", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.21.4.tgz", + "integrity": "sha512-LZsllEbiu63zNwuCalq3gIFcBu2Xf0I0fMg7uuF7/5ROo5//uHe8Sum7v9L1Rtp6IozcoU9YAjkNUZdrxutsNg==", + "dependencies": { + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.5", "license": "BSD-3-Clause", @@ -15808,6 +15918,14 @@ "node": ">=0.10.0" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "license": "MIT",