From 77815c505909ee4d180dc85e2542c28b39ea396f Mon Sep 17 00:00:00 2001 From: Karan Mehta <95593651+KaranAtTeamForm@users.noreply.github.com> Date: Fri, 13 Sep 2024 08:48:48 +1000 Subject: [PATCH] Revert/react router dom to v5 (#337) * revert react-router-dom to v5 * update version --- lib/components/SideNav/SideNav.stories.js | 73 +++++------ .../StyledLink/StyledLink.stories.js | 18 +-- package-lock.json | 120 +++++++++++++----- package.json | 4 +- 4 files changed, 127 insertions(+), 88 deletions(-) diff --git a/lib/components/SideNav/SideNav.stories.js b/lib/components/SideNav/SideNav.stories.js index ff0b189f..72187977 100644 --- a/lib/components/SideNav/SideNav.stories.js +++ b/lib/components/SideNav/SideNav.stories.js @@ -5,10 +5,11 @@ import { BrowserRouter as Router, Route, Link, - Routes, - useParams, - useMatch, - Navigate + useLocation, + matchPath, + Switch, + Redirect, + useParams } from "react-router-dom"; import { H5, P } from "../Typography"; import Box from "../Box"; @@ -62,9 +63,7 @@ const PageCard = ({ children }) => { }; const SideBarWithConfig = () => { - const isHome = useMatch("/"); - const isProfile = useMatch("/profile"); - const isSearch = useMatch("/search"); + const location = useLocation(); const items = [ { @@ -72,38 +71,38 @@ const SideBarWithConfig = () => { name: "Home", component: makeLinkComponent("/"), actionType: "link", - isActive: !!isHome + isActive: matchPath(location.pathname, { path: "/", exact: true }) }, { iconName: "user", name: "My profile", component: makeLinkComponent("/profile"), actionType: "link", - isActive: !!isProfile + isActive: matchPath(location.pathname, { path: "/profile" }) }, { iconName: "id-card", name: "Search Page", component: makeLinkComponent("/search"), actionType: "link", - isActive: isSearch + isActive: matchPath(location.pathname, { path: "/search" }) }, { iconName: "snowflake", name: "Filter", - hide: !isSearch, // Specify hide if you want to hide this item + hide: !matchPath(location.pathname, { path: "/search" }), // Specify hide if you want to hide this item component: makePanelComponent("Filter"), actionType: "component", // Use 'component' for a component - pageSpecific: isSearch, + pageSpecific: matchPath(location.pathname, { path: "/search" }), isExpandedByDefault: true }, { iconName: "sun", name: "People", - hide: !isProfile, // Specify hide if you want to hide this item + hide: !matchPath(location.pathname, { path: "/profile" }), // Specify hide if you want to hide this item component: makePanelComponent("People"), actionType: "component", // Use 'component' for a component - pageSpecific: isProfile, + pageSpecific: matchPath(location.pathname, { path: "/profile" }), isExpandedByDefault: true }, { @@ -166,34 +165,24 @@ const SideBarWithConfig = () => { return ( - - -
Home
- - } - /> - -
Profile route
- - } - /> - - - - } - /> - - } /> - + + + +
Home
+ + + + +
Profile route
+ + + + + + + + + ); }; diff --git a/lib/components/StyledLink/StyledLink.stories.js b/lib/components/StyledLink/StyledLink.stories.js index 65ed02ce..210e1382 100644 --- a/lib/components/StyledLink/StyledLink.stories.js +++ b/lib/components/StyledLink/StyledLink.stories.js @@ -3,7 +3,7 @@ import StyledLink from "."; import Box from "../Box"; import Flex from "../Flex"; import Spacer from "../Spacer"; -import { BrowserRouter, Route, Routes } from "react-router-dom"; +import { BrowserRouter, Route, Switch } from "react-router-dom"; export default { title: "Components/StyledLink", @@ -64,19 +64,13 @@ export const reactLink = () => ( {route.label} ))} - + {routes.map((route) => ( - - ROUTE RENDERED: {route.label} - - } - /> + +
ROUTE RENDERED: {route.label}
+ ))} - + ); reactLink.storyName = "Using react-router-dom"; diff --git a/package-lock.json b/package-lock.json index 374a0004..6d26a053 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "orcs-design-system", - "version": "3.2.39", + "version": "3.2.40", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "orcs-design-system", - "version": "3.2.39", + "version": "3.2.40", "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", @@ -30,7 +30,7 @@ "react-intersection-observer": "^9.4.3", "react-moment-proptypes": "^1.8.1", "react-number-format": "^5.3.0", - "react-router-dom": "^6.26.2", + "react-router-dom": "^5.3.4", "react-select": "^5.7.4", "styled-system": "^5.1.5" }, @@ -4674,14 +4674,6 @@ "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==" }, - "node_modules/@remix-run/router": { - "version": "1.19.2", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", - "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -23611,35 +23603,85 @@ } }, "node_modules/react-router": { - "version": "6.26.2", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", - "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", - "dependencies": { - "@remix-run/router": "1.19.2" - }, - "engines": { - "node": ">=14.0.0" + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", + "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", + "dependencies": { + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { - "react": ">=16.8" + "react": ">=15" } }, "node_modules/react-router-dom": { - "version": "6.26.2", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", - "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", + "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", "dependencies": { - "@remix-run/router": "1.19.2", - "react-router": "6.26.2" - }, - "engines": { - "node": ">=14.0.0" + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.3.4", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "react": ">=15" + } + }, + "node_modules/react-router-dom/node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "node_modules/react-router/node_modules/history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, + "node_modules/react-router/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/react-router/node_modules/path-to-regexp": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", + "dependencies": { + "isarray": "0.0.1" } }, + "node_modules/react-router/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -25478,6 +25520,11 @@ "node": ">=4" } }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "node_modules/resolve-url-loader": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz", @@ -28117,8 +28164,12 @@ "node_modules/tiny-invariant": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", - "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==", - "dev": true + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, "node_modules/tmpl": { "version": "1.0.5", @@ -29089,6 +29140,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "node_modules/value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 70a8b9e5..6bd47805 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "orcs-design-system", - "version": "3.2.39", + "version": "3.2.40", "engines": { "node": "20.12.2" }, @@ -66,7 +66,7 @@ "react-intersection-observer": "^9.4.3", "react-moment-proptypes": "^1.8.1", "react-number-format": "^5.3.0", - "react-router-dom": "^6.26.2", + "react-router-dom": "^5.3.4", "react-select": "^5.7.4", "styled-system": "^5.1.5" },