diff --git a/.changeset/forty-zebras-kick.md b/.changeset/forty-zebras-kick.md new file mode 100644 index 0000000000..1562e57943 --- /dev/null +++ b/.changeset/forty-zebras-kick.md @@ -0,0 +1,5 @@ +--- +'@sovryn/ui': patch +--- + +SOV-786: remove react-router as UI dependency diff --git a/apps/frontend/package.json b/apps/frontend/package.json index d81cfbb87c..616e0deb56 100644 --- a/apps/frontend/package.json +++ b/apps/frontend/package.json @@ -14,6 +14,7 @@ "ethers": "5.7.1", "react": "18.2.0", "react-dom": "18.2.0", + "react-router-dom": "6.4.2", "react-scripts": "5.0.1" }, "devDependencies": { diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js index 2121a9ae5b..fa48b43702 100644 --- a/packages/ui/.storybook/preview.js +++ b/packages/ui/.storybook/preview.js @@ -1,4 +1,3 @@ -import { MemoryRouter } from 'react-router-dom'; import resolveConfig from 'tailwindcss/resolveConfig'; import tailwindConfig from '@sovryn/tailwindcss-config/index'; @@ -12,14 +11,6 @@ const screens = { ...config.theme.screens, }; -export const decorators = [ - Story => ( - - - - ), -]; - const backgrounds = Object.entries(config.theme.backgroundColor).map( ([name, value]) => ({ name, value }), ); diff --git a/packages/ui/package.json b/packages/ui/package.json index 45dee4e1cb..74a2f515f3 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -57,8 +57,7 @@ "classnames": "2.3.1", "focus-trap-react": "10.0.0", "identity-obj-proxy": "3.0.0", - "jest-canvas-mock": "2.4.0", - "react-router-dom": "6.3.0" + "jest-canvas-mock": "2.4.0" }, "peerDependencies": { "react": ">=18.2", diff --git a/packages/ui/src/1_atoms/Button/Button.test.tsx b/packages/ui/src/1_atoms/Button/Button.test.tsx index 2e5e96f8fb..c1b49ac36d 100644 --- a/packages/ui/src/1_atoms/Button/Button.test.tsx +++ b/packages/ui/src/1_atoms/Button/Button.test.tsx @@ -3,8 +3,6 @@ import userEvent from '@testing-library/user-event'; import React from 'react'; -import { MemoryRouter } from 'react-router-dom'; - import { Button } from './Button'; import { ButtonSize, ButtonStyle } from './Button.types'; @@ -39,28 +37,9 @@ describe('Button', () => { expect(document.activeElement).toEqual(ref.current); }); - it('can be focused when using refs (hyperlink / external)', () => { + it('can be focused when using refs (hyperlink)', () => { const ref = React.createRef(); - render( - , - ); - waitFor(() => ref.current); - ref.current?.focus(); - expect(document.activeElement).toEqual(ref.current); - }); - - it('can be focused when using refs (router link)', () => { - const ref = React.createRef(); - render( - - - , - ); + render(); waitFor(() => ref.current); ref.current?.focus(); expect(document.activeElement).toEqual(ref.current); diff --git a/packages/ui/src/1_atoms/Button/Button.tsx b/packages/ui/src/1_atoms/Button/Button.tsx index 630bcc4d65..14efd5b34d 100644 --- a/packages/ui/src/1_atoms/Button/Button.tsx +++ b/packages/ui/src/1_atoms/Button/Button.tsx @@ -7,7 +7,6 @@ import React, { } from 'react'; import classNames from 'classnames'; -import { Link } from 'react-router-dom'; import styles from './Button.module.css'; import { ButtonType, ButtonSize, ButtonStyle } from './Button.types'; @@ -66,33 +65,19 @@ export const Button = forwardRef< ); if (href) { - if (hrefExternal) { - return ( - } - className={classNamesComplete} - href={href} - target="_blank" - rel="noreferrer" - onClick={onClickHandler} - data-layout-id={dataLayoutId} - > - {text} - - ); - } else { - return ( - } - to={href} - className={classNamesComplete} - onClick={onClickHandler} - data-layout-id={dataLayoutId} - > - {text} - - ); - } + return ( + } + className={classNamesComplete} + href={href} + target={hrefExternal ? '_blank' : undefined} + rel="noopener noreferrer" + onClick={onClickHandler} + data-layout-id={dataLayoutId} + > + {text} + + ); } else { return ( = ({ label, disabled, href, - hrefExternal, + isActive, onClick, dataLayoutId, + hrefExternal, }) => { const onClickHandler = useCallback( event => { @@ -47,58 +48,32 @@ export const MenuItem: React.FC = ({ [onClick, disabled], ); - const location = useLocation(); - - const isActive = useMemo( - () => href && href === location.pathname, - [href, location.pathname], - ); - const button = useMemo(() => { if (href) { - if (hrefExternal) { - return ( - - - - {icon && } - {text} + return ( + + + + {icon && } + {text} + {hrefExternal && ( - - {label && {label}} + )} - - ); - } else { - return ( - - - - {icon && } - {text} - - {label && {label}} - - - ); - } + {label && {label}} + + + ); } else { return ( = ({ disabled={disabled} className={classNames(styles.button, { [styles.disabled]: disabled, + [styles.active]: isActive, })} onClick={onClickHandler} data-layout-id={dataLayoutId} diff --git a/packages/ui/src/2_molecules/WalletIdentity/WalletIdentity.test.tsx b/packages/ui/src/2_molecules/WalletIdentity/WalletIdentity.test.tsx index 7de063c65d..621a80b76e 100644 --- a/packages/ui/src/2_molecules/WalletIdentity/WalletIdentity.test.tsx +++ b/packages/ui/src/2_molecules/WalletIdentity/WalletIdentity.test.tsx @@ -6,13 +6,6 @@ import React from 'react'; import { prettyTx } from '../../utils'; import { WalletIdentity } from './WalletIdentity'; -jest.mock('react-router', () => ({ - ...(jest.requireActual('react-router') as {}), - useLocation: jest.fn().mockImplementation(() => { - return { pathname: '/testroute', search: '', hash: '', state: null }; - }), -})); - Object.assign(navigator, { clipboard: { writeText: () => {}, diff --git a/yarn.lock b/yarn.lock index b56a174f25..5117830a07 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2810,6 +2810,11 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@remix-run/router@1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.2.tgz#1c17eadb2fa77f80a796ad5ea9bf108e6993ef06" + integrity sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ== + "@rollup/plugin-babel@^5.2.0", "@rollup/plugin-babel@^5.3.0": version "5.3.1" resolved "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz" @@ -9844,13 +9849,6 @@ highlight.js@^10.4.1, highlight.js@~10.7.0: resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz" integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A== -history@^5.2.0: - version "5.3.0" - resolved "https://registry.npmjs.org/history/-/history-5.3.0.tgz" - integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ== - dependencies: - "@babel/runtime" "^7.7.6" - hmac-drbg@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz" @@ -14685,20 +14683,20 @@ react-refresh@^0.11.0: resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-router-dom@6.3.0: - version "6.3.0" - resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz" - integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw== +react-router-dom@6.4.2: + version "6.4.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.4.2.tgz#115b37d501d6d8ac870683694978c51c43e6c0d2" + integrity sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ== dependencies: - history "^5.2.0" - react-router "6.3.0" + "@remix-run/router" "1.0.2" + react-router "6.4.2" -react-router@6.3.0: - version "6.3.0" - resolved "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz" - integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ== +react-router@6.4.2: + version "6.4.2" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.4.2.tgz#300628ee9ed81b8ef1597b5cb98b474efe9779b8" + integrity sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw== dependencies: - history "^5.2.0" + "@remix-run/router" "1.0.2" react-scripts@5.0.1: version "5.0.1"