Lazyload SmartLink to avoid loading react-router-dom + use a proper l…

…inkProperties (#1160)

**Related Ticket:** follow up of follow up -_-
#1159

### Description of Changes
Urg I used wrong attributes, so the previous fix didn't really fix the
problem.
The previous approach broke the library build too by including
SmartLink, which uses react-router-dom. I think I worked around by lazy
loading the component in this PR. I tested it locally but if you can,
please give it another test 🙇

### Notes & Questions About Changes


### Validation / Testing
ok, this time, I actually created a preview on GHG; this is the page
that uses Card component:
https://deploy-preview-596--ghg-demo.netlify.app/learn

app/scripts/components/common/card/index.tsx

@@ -1,17 +1,17 @@
-import React, { MouseEventHandler } from 'react';
+import React, { lazy, MouseEventHandler, ComponentType } from 'react';
 import styled, { css } from 'styled-components';
-import { Link } from 'react-router-dom';
 import { format } from 'date-fns';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
-
+import { Link } from 'react-router-dom';
+const SmartLink = lazy(() => import('../smart-link'));
 import {
   glsp,
   media,
   multiply,
   themeVal,
   listReset,
 } from '@devseed-ui/theme-provider';
-import SmartLink from '../smart-link';
+
 import { CardBody, CardBlank, CardHeader, CardHeadline, CardTitle, CardOverline } from './styles';
 import HorizontalInfoCard, { HorizontalCardStyles } from './horizontal-info-card';
 import { variableBaseType, variableGlsp } from '$styles/variable-utils';
@@ -221,14 +221,17 @@ export function ExternalLinkFlag() {
 }
 
 export interface LinkProperties {
-  LinkElement: JSX.Element | ((props: any) => JSX.Element);
+  LinkElement: JSX.Element | ((props: any) => JSX.Element) | ComponentType<any>;
   pathAttributeKeyName: string;
   onLinkClick?: MouseEventHandler;
 }
 
+export interface LinkWithPathProperties extends LinkProperties {
+  linkTo: string;
+}
+
 export interface CardComponentBaseProps {
   title: JSX.Element | string;
-
   linkLabel?: string;
   className?: string;
   cardType?: CardType;
@@ -244,14 +247,13 @@ export interface CardComponentBaseProps {
 }
 
 // @TODO: Consolidate these props when the instance adapts the new syntax
+// Specifically: https://github.com/US-GHG-Center/veda-config-ghg/blob/develop/custom-pages/news-and-events/component.tsx#L108
 export interface CardComponentPropsDeprecated extends CardComponentBaseProps {
   linkTo: string;
   onLinkClick?: MouseEventHandler;
 }
 export interface CardComponentProps extends CardComponentBaseProps {
-  linkProperties: {
-    linkTo: string,
-  } & LinkProperties;
+  linkProperties: LinkWithPathProperties;
 }
 
 type CardComponentPropsType = CardComponentProps | CardComponentPropsDeprecated;
@@ -277,8 +279,9 @@ function CardComponent(props: CardComponentPropsType) {
     footerContent,
     onCardClickCapture
   } = props;
-
-  let linkProperties;
+// @TODO: This process is not necessary once all the instances adapt the linkProperties syntax
+// Consolidate them to use LinkProperties only
+  let linkProperties: LinkWithPathProperties;
 
   if (hasLinkProperties(props)) {
     // Handle new props with linkProperties
@@ -287,10 +290,10 @@ function CardComponent(props: CardComponentPropsType) {
   } else {
     const { linkTo, onLinkClick,  } = props;
     linkProperties = {
-      to: linkTo,
+      linkTo,
       onLinkClick,
       pathAttributeKeyName: 'to',
-      linkComponent: SmartLink
+      LinkElement: SmartLink
     };
   }
 

app/scripts/instance.ts

@@ -41,6 +41,8 @@ import Hug from "$styles/hug";
 import { Actions } from "$components/common/browse-controls/use-browse-controls";
 import Image from "$components/common/blocks/images";
 
+import SmartLink from "$components/common/smart-link";
+
 export {
   STORIES_PATH,
   DATASETS_PATH,
@@ -67,6 +69,7 @@ export {
   FoldProse,
   Hug,
   Image,
+  SmartLink,
   Pill,
   Tip,
   VarHeading