feat: rework links (#280)

now the `href` receivers:
- Button
- IconButton
- HoverableLink

do not require additional `onClick` handlers
`href` prop just works
and `noreferrer noopener` was implemented

Author: snqb

package.json

@@ -35,7 +35,8 @@
   },
   "peerDependencies": {
     "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react-dom": "^16.14.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -82,6 +83,7 @@
     "prettier": "^2.5.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-router-dom": "^6.3.0",
     "semantic-release": "^19.0.2",
     "storybook-dark-mode": "^1.1.0",
     "typescript": "^4.6.2",

src/components/button/index.tsx

@@ -1,13 +1,14 @@
+import * as R from 'ramda';
 import React, { FC } from 'react';
 import { Button as RebassButton, ButtonProps } from 'rebass';
-import * as R from 'ramda';
 
 // Styles
-import styles, { spinnerColor } from './button.styles';
+import { Link } from 'react-router-dom';
 import Spinner from '../spinner';
+import styles, { spinnerColor } from './button.styles';
 
-import { GetIcon, IconName } from '../icon';
 import { Color } from '../../theme/types';
+import { GetIcon, IconName } from '../icon';
 
 type Intent = 'primary' | 'secondary' | 'ghost' | 'inline' | 'alert';
 export interface QuartzButtonProps extends Omit<ButtonProps, 'css'> {
@@ -27,6 +28,7 @@ const Button: FC<QuartzButtonProps> = ({
   disabled,
   isLoading,
   loadingOnly,
+  target,
   ...props
 }: QuartzButtonProps) => {
   const test = { ...props };
@@ -49,17 +51,16 @@ const Button: FC<QuartzButtonProps> = ({
 
   if (href) {
     return (
-      <a
+      <Link
         style={{
           textDecoration: 'none',
         }}
-        onClick={(e) => {
-          e.preventDefault();
-        }}
-        href={href}
+        to={href}
+        target={target}
+        {...(target === '_blank' ? { rel: 'noopener noreferrer' } : {})}
       >
         {component}
-      </a>
+      </Link>
     );
   }
 

src/components/icon-button/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 import { Button as RebassButton, ButtonProps } from 'rebass';
+import { Link } from 'react-router-dom';
 
 // Components
 import Tooltip, { TooltipProps } from '../tooltip';
 
-// Styles
+import { getIcon, IconName } from '../icon/list';
 import styles from './icon-button.styles';
-import { IconName, getIcon } from '../icon/list';
 
 export interface IconButtonProps extends Omit<ButtonProps, 'css'> {
   intent?: 'primary' | 'ghost' | 'ghost-white';
@@ -26,6 +26,7 @@ const IconButton: FC<IconButtonProps> = ({
   tooltipProps,
   href,
   onClickIcon,
+  target,
   ...props
 }: IconButtonProps) => {
   let component;
@@ -57,28 +58,20 @@ const IconButton: FC<IconButtonProps> = ({
 
   if (href) {
     return (
-      <a
+      <Link
         style={{
           textDecoration: 'none',
         }}
         onClick={onClickIcon}
-        href={href}
+        to={href}
+        target={target}
+        {...(target === '_blank' ? { rel: 'noopener noreferrer' } : {})}
       >
         {component}
-      </a>
+      </Link>
     );
   }
-  return (
-    <a
-      style={{
-        textDecoration: 'none',
-      }}
-      onClick={onClickIcon}
-      href={href}
-    >
-      {component}
-    </a>
-  );
+  return component;
 };
 
 export default IconButton;

src/components/navigation/item/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from 'rebass';
+import * as R from 'ramda';
 import React, {
   FC,
   memo,
@@ -8,16 +8,17 @@ import React, {
   useEffect,
   useMemo,
 } from 'react';
-import * as R from 'ramda';
+import { Box } from 'rebass';
+import { Link } from 'react-router-dom';
 import { useTheme } from '../../../theme/theme';
 
 // Context
 import NavigationContext from '../context/navigation.context';
 import { NavigationItemProps } from '../types';
 // Styles
-import styles from './navigation-item.styles';
 import Tooltip from '../../tooltip';
 import TooltipPositions from '../../tooltip/positions';
+import styles from './navigation-item.styles';
 
 const getVariant = (isDisabled = false, isActive = false): string => {
   if (isDisabled) {
@@ -127,17 +128,15 @@ const NavigationItem: FC<NavigationItemProps> = (
       }}
     >
       {href ? (
-        <a
+        <Link
           style={{
             textDecoration: 'none',
           }}
-          onClick={(e) => {
-            e.preventDefault();
-          }}
-          href={href}
+          onClick={(e) => e.stopPropagation()}
+          to={href}
         >
           {component}
-        </a>
+        </Link>
       ) : (
         component
       )}

src/components/typography/hoverable.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { Text, TextProps, Link, LinkProps } from 'rebass';
+import { Link } from 'react-router-dom';
+import { Text, TextProps, LinkProps, Link as RebassLink } from 'rebass';
 
 export interface HoverableTextProps extends Omit<TextProps, 'css'> {}
 export interface HoverableLinkProps extends Omit<LinkProps, 'css'> {}
@@ -20,10 +21,24 @@ export const HoverableText: FC<HoverableTextProps> = (
   return <Text {...props} variant="title" sx={sx} />;
 };
 
-export const HoverableLink: FC<HoverableLinkProps> = (
-  props: HoverableLinkProps,
-) => {
+export const HoverableLink: FC<HoverableLinkProps> = ({
+  href,
+  target,
+  ...props
+}: HoverableLinkProps) => {
   let { sx } = { ...props };
   sx = { ...sx, ...styles };
-  return <Link {...props} variant="title" sx={sx} />;
+
+  return (
+    <RebassLink
+      as={Link}
+      {...props}
+      // @ts-ignore
+      to={href}
+      variant="title"
+      sx={sx}
+      target={target}
+      {...(target === '_blank' ? { rel: 'noopener noreferrer' } : {})}
+    />
+  );
 };

yarn.lock

@@ -2683,6 +2683,7 @@ __metadata:
     react-codemirror2: ^7.2.1
     react-datepicker: ^3.3.0
     react-dom: ^16.14.0
+    react-router-dom: ^6.3.0
     react-spring: ^8.0.27
     react-syntax-highlighter: ^15.4.3
     rebass: ^4.0.7
@@ -2694,6 +2695,7 @@ __metadata:
   peerDependencies:
     react: ^16.14.0
     react-dom: ^16.14.0
+    react-router-dom: ^6.3.0
   languageName: unknown
   linkType: soft
 
@@ -12061,6 +12063,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"history@npm:^5.2.0":
+  version: 5.3.0
+  resolution: "history@npm:5.3.0"
+  dependencies:
+    "@babel/runtime": ^7.7.6
+  checksum: d73c35df49d19ac172f9547d30a21a26793e83f16a78386d99583b5bf1429cc980799fcf1827eb215d31816a6600684fba9686ce78104e23bd89ec239e7c726f
+  languageName: node
+  linkType: hard
+
 "hmac-drbg@npm:^1.0.1":
   version: 1.0.1
   resolution: "hmac-drbg@npm:1.0.1"
@@ -18751,6 +18762,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "react-router-dom@npm:6.3.0"
+  dependencies:
+    history: ^5.2.0
+    react-router: 6.3.0
+  peerDependencies:
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 77603a654f8a8dc7f65535a2e5917a65f8d9ffcb06546d28dd297e52adcc4b8a84377e0115f48dca330b080af2da3e78f29d590c89307094d36927d2b1751ec3
+  languageName: node
+  linkType: hard
+
+"react-router@npm:6.3.0":
+  version: 6.3.0
+  resolution: "react-router@npm:6.3.0"
+  dependencies:
+    history: ^5.2.0
+  peerDependencies:
+    react: ">=16.8"
+  checksum: 7be673f5e72104be01e6ab274516bdb932efd93305243170690f6560e3bd1035dd1df3d3c9ce1e0f452638a2529f43a1e77dcf0934fc8031c4783da657be13ca
+  languageName: node
+  linkType: hard
+
 "react-spring@npm:^8.0.27":
   version: 8.0.27
   resolution: "react-spring@npm:8.0.27"