chore: added shared link provider

apps/deriv-hk/pages/_app.tsx

@@ -1,13 +1,23 @@
 import { AppProps } from 'next/app';
 import '../styles.css';
 import { ThemeProvider } from '@deriv/quill-design';
-import { BuildVariantProvider } from '@deriv-com/providers';
+import {
+  BuildVariantProvider,
+  SharedLinkProvider,
+  SharedLink,
+} from '@deriv-com/providers';
+import Link from 'next/link';
 
+const NextSharedLink: SharedLink = ({ href, ...rest }) => {
+  return <Link href={href ?? '/'} {...rest} />;
+};
 function CustomApp({ Component, pageProps }: AppProps) {
   return (
     <BuildVariantProvider buildVariant="hk">
       <ThemeProvider theme="light">
-        <Component {...pageProps} />
+        <SharedLinkProvider DerivLink={NextSharedLink}>
+          <Component {...pageProps} />
+        </SharedLinkProvider>
       </ThemeProvider>
     </BuildVariantProvider>
   );

libs/blocks/vite.config.ts

@@ -45,7 +45,7 @@ export default defineConfig({
         '@deriv-com/components',
       ],
     },
-    minify: true,
+    minify: false,
   },
 
   test: {

libs/components/src/lib/link/index.tsx

@@ -1,10 +1,9 @@
+import { useSharedLink } from '@deriv-com/hooks';
 import { qtMerge } from '@deriv/quill-design';
 import { StandaloneChevronRightRegularIcon } from '@deriv/quill-icons';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { ComponentPropsWithRef, useState } from 'react';
+import { HTMLAttributes, useState } from 'react';
 
-export interface CustomLinkProps extends ComponentPropsWithRef<typeof Link> {
+export interface CustomLinkProps extends HTMLAttributes<HTMLAnchorElement> {
   skipLocaleHandling?: boolean;
   size?: textSize;
   href: string;
@@ -30,42 +29,15 @@ export function CustomLink({
   children,
   ...rest
 }: CustomLinkProps) {
-  // TODO: uncomment this when we have localization
-  // const customHref = useCustomLink({
-  //   href,
-  //   locale: rest.locale,
-  //   skipLocaleHandling: skipLocaleHandling,
-  // });
-
-  // TODO: remove this when we have localization
-  const router = useRouter();
-  const locale = rest.locale || router.query.locale || 'en';
-
-  let customHref = href.toString() || router.asPath;
-  if (customHref.indexOf('http') === 0) skipLocaleHandling = true;
-  if (locale && !skipLocaleHandling) {
-    if (locale === 'en') {
-      if (customHref === '/') {
-        customHref = '/';
-      } else {
-        customHref = customHref
-          ? `${customHref}`
-          : router.pathname.replace('[locale]', locale as string);
-      }
-    } else {
-      customHref = customHref
-        ? `/${locale}${customHref}`
-        : router.pathname.replace('[locale]', locale as string);
-    }
-  }
+  const { DerivLink } = useSharedLink();
 
   const [isHover, setHover] = useState(false);
 
   return (
-    <Link
+    <DerivLink
       onMouseOver={() => hasHoverColor && setHover(true)}
       onMouseOut={() => setHover(false)}
-      href={customHref}
+      href={href}
       className={qtMerge(
         'flex items-center justify-center',
         'text-typography-prominent',
@@ -88,7 +60,7 @@ export function CustomLink({
           fill={isHover || hasLinkColor ? '#FF444F' : '#000000'}
         />
       )}
-    </Link>
+    </DerivLink>
   );
 }
 

libs/components/vite.config.ts

@@ -40,7 +40,7 @@ export default defineConfig({
         'swiper',
       ],
     },
-    minify: true,
+    minify: false,
   },
 
   test: {

libs/hooks/src/index.ts

@@ -1,3 +1,3 @@
-export * from './lib/use-custom-link/use-custom-link';
 export * from './lib/use-build-variant';
 export * from './lib/use-navigation';
+export * from './lib/use-shared-link';

libs/hooks/src/lib/use-shared-link/index.ts

@@ -0,0 +1,6 @@
+import { SharedLinkContext } from '@deriv-com/providers';
+import { useContext } from 'react';
+
+export const useSharedLink = () => {
+  return useContext(SharedLinkContext);
+};

libs/providers/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/build-variant';
 export * from './lib/navigation';
+export * from './lib/shared-link-provider';

libs/providers/src/lib/shared-link-provider/index.ts

@@ -0,0 +1,3 @@
+export * from './shared-link-provider.context';
+export * from './shared-link-provider.provider';
+export * from './types';

libs/providers/src/lib/shared-link-provider/shared-link-provider.context.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SharedLinkContextValue } from './types';
+
+export const SharedLinkContext = React.createContext<SharedLinkContextValue>({
+  DerivLink: (props) => <a {...props} />,
+});

libs/providers/src/lib/shared-link-provider/shared-link-provider.provider.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { SharedLink } from './types';
+import { SharedLinkContext } from './shared-link-provider.context';
+
+export const SharedLinkProvider = ({
+  children,
+  DerivLink,
+}: {
+  DerivLink: SharedLink;
+  children: ReactNode;
+}) => {
+  return (
+    <SharedLinkContext.Provider value={{ DerivLink }}>
+      {children}
+    </SharedLinkContext.Provider>
+  );
+};

libs/providers/src/lib/shared-link-provider/types.ts

@@ -0,0 +1,11 @@
+import React, { AnchorHTMLAttributes } from 'react';
+
+export interface SharedLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  fasih?: string;
+}
+export type SharedLink = React.FC<SharedLinkProps>;
+
+export interface SharedLinkContextValue {
+  DerivLink: SharedLink;
+}