fix: remove react-router as dependecy from ui library (#48)

* fix: remove react-router as dependecy from ui library * fix: href external * fix: story and package.json
DistributedCollective · Nov 8, 2022 · 17ccf4e · 17ccf4e
1 parent 902fe38
commit 17ccf4e
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 137 deletions.
diff --git a/.changeset/forty-zebras-kick.md 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
@@ -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
@@ -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 => (
-    <MemoryRouter>
-      <Story />
-    </MemoryRouter>
-  ),
-];
-
 const backgrounds = Object.entries(config.theme.backgroundColor).map(
   ([name, value]) => ({ name, value }),
 );

diff --git 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
@@ -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<HTMLAnchorElement>();
-    render(
-      <Button
-        text="Hyperlink"
-        ref={ref}
-        href="https://www.sovryn.app"
-        hrefExternal
-      />,
-    );
-    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<HTMLAnchorElement>();
-    render(
-      <MemoryRouter>
-        <Button text="Hyperlink" ref={ref} href="/" />
-      </MemoryRouter>,
-    );
+    render(<Button text="Hyperlink" ref={ref} href="https://www.sovryn.app" />);
     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
@@ -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 (
-          <a
-            ref={ref as LegacyRef<HTMLAnchorElement>}
-            className={classNamesComplete}
-            href={href}
-            target="_blank"
-            rel="noreferrer"
-            onClick={onClickHandler}
-            data-layout-id={dataLayoutId}
-          >
-            {text}
-          </a>
-        );
-      } else {
-        return (
-          <Link
-            ref={ref as React.Ref<HTMLAnchorElement>}
-            to={href}
-            className={classNamesComplete}
-            onClick={onClickHandler}
-            data-layout-id={dataLayoutId}
-          >
-            {text}
-          </Link>
-        );
-      }
+      return (
+        <a
+          ref={ref as LegacyRef<HTMLAnchorElement>}
+          className={classNamesComplete}
+          href={href}
+          target={hrefExternal ? '_blank' : undefined}
+          rel="noopener noreferrer"
+          onClick={onClickHandler}
+          data-layout-id={dataLayoutId}
+        >
+          {text}
+        </a>
+      );
     } else {
       return (
         <button

diff --git a/packages/ui/src/2_molecules/Menu/components/MenuItem/MenuItem.tsx b/packages/ui/src/2_molecules/Menu/components/MenuItem/MenuItem.tsx
@@ -6,7 +6,6 @@ import React, {
 } from 'react';
 
 import classNames from 'classnames';
-import { Link, useLocation } from 'react-router-dom';
 
 import { Icon } from '../../../../1_atoms';
 import { IconType } from '../../../../1_atoms/Icon/Icon.types';
@@ -18,6 +17,7 @@ type MenuItemProps = {
   text: ReactNode;
   label?: ReactNode;
   disabled?: boolean;
+  isActive?: boolean;
   href?: string;
   hrefExternal?: boolean;
   onClick?: MouseEventHandler;
@@ -31,9 +31,10 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   label,
   disabled,
   href,
-  hrefExternal,
+  isActive,
   onClick,
   dataLayoutId,
+  hrefExternal,
 }) => {
   const onClickHandler = useCallback(
     event => {
@@ -47,65 +48,40 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     [onClick, disabled],
   );
 
-  const location = useLocation();
-
-  const isActive = useMemo(
-    () => href && href === location.pathname,
-    [href, location.pathname],
-  );
-
   const button = useMemo(() => {
     if (href) {
-      if (hrefExternal) {
-        return (
-          <a
-            className={classNames(styles.button, {
-              [styles.disabled]: disabled,
-            })}
-            href={href}
-            target="_blank"
-            rel="noreferrer"
-            onClick={onClickHandler}
-            data-layout-id={dataLayoutId}
-          >
-            <div className={styles.hostBlock}>
-              <div className={styles.hostFlex}>
-                {icon && <Icon icon={icon} className={styles.icon} />}
-                <span className={classNames(styles.text)}>{text}</span>
+      return (
+        <a
+          className={classNames(styles.button, {
+            [styles.disabled]: disabled,
+            [styles.active]: isActive,
+          })}
+          href={href}
+          target={hrefExternal ? '_blank' : undefined}
+          rel="noopener noreferrer"
+          onClick={onClickHandler}
+          data-layout-id={dataLayoutId}
+        >
+          <div className={styles.hostBlock}>
+            <div className={styles.hostFlex}>
+              {icon && <Icon icon={icon} className={styles.icon} />}
+              <span className={classNames(styles.text)}>{text}</span>
+              {hrefExternal && (
                 <Icon icon={'new-tab'} className={styles.externalIcon} />
-              </div>
-              {label && <span className={styles.label}>{label}</span>}
+              )}
             </div>
-          </a>
-        );
-      } else {
-        return (
-          <Link
-            to={href}
-            className={classNames(styles.button, {
-              [styles.disabled]: disabled,
-              [styles.active]: isActive,
-            })}
-            onClick={onClickHandler}
-            data-layout-id={dataLayoutId}
-          >
-            <div className={styles.hostBlock}>
-              <div className={styles.hostFlex}>
-                {icon && <Icon icon={icon} className={styles.icon} />}
-                <span className={classNames(styles.text)}>{text}</span>
-              </div>
-              {label && <span className={styles.label}>{label}</span>}
-            </div>
-          </Link>
-        );
-      }
+            {label && <span className={styles.label}>{label}</span>}
+          </div>
+        </a>
+      );
     } else {
       return (
         <button
           type="button"
           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
@@ -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
@@ -2810,6 +2810,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@remix-run/[email protected]":
+  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"
 
 [email protected]:
   version "5.0.1"