Add TextLink component (#468)

* feat: ✨ add empty packages/ui

* feat: ⚗️ move taxes app-grid to packages/ui

* build: ⬆️ upgrade macaw-ui in packages/ui

* build: ⬆️ upgrade macaw even harder

* add app sdk

* Fix app-sdk version

* Add TextLink

* Add TextLink

* Change method name

* Cleanup

---------

Co-authored-by: Adrian Pilarczyk <adrianpilarczyk314@gmail.com>

.changeset/mighty-eels-live.md

@@ -0,0 +1,5 @@
+---
+"@saleor/apps-ui": minor
+---
+
+Added TextLink component that can work with Next router and AppBridge.dispatch

.changeset/quick-rules-doubt.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-search": minor
+---
+
+Use TextLink component from shared package

apps/search/next.config.js

@@ -23,7 +23,7 @@ const moduleExports = {
       },
     ],
   },
-  transpilePackages: ["@saleor/apps-shared"],
+  transpilePackages: ["@saleor/apps-shared", "@saleor/apps-ui"],
   sentry: {
     /*
      * Use `hidden-source-map` rather than `source-map` as the Webpack `devtool`

apps/search/src/components/MainInstructions.tsx

@@ -1,12 +1,10 @@
-import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
+import { TextLink } from "@saleor/apps-ui";
 import { Box, PropsWithBox, Text } from "@saleor/macaw-ui/next";
 
 const SALEOR_EVENTS_DOCS_URL =
   "https://docs.saleor.io/docs/3.x/developer/extending/apps/asynchronous-webhooks#available-webhook-events";
 
 export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => {
-  const { appBridge } = useAppBridge();
-
   return (
     <Box {...props}>
       <Text as="p" marginBottom={4}>
@@ -17,25 +15,10 @@ export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => {
         Saleor database.
       </Text>
       <Text as="p">
-        The app supports following{" "}
-        <a
-          onClick={(e) => {
-            e.preventDefault();
-
-            /**
-             * TODO extract shared handler
-             */
-            appBridge?.dispatch(
-              actions.Redirect({
-                to: SALEOR_EVENTS_DOCS_URL,
-                newContext: true,
-              })
-            );
-          }}
-          href={SALEOR_EVENTS_DOCS_URL}
-        >
+        The app supports following
+        <TextLink href={SALEOR_EVENTS_DOCS_URL} newTab>
           events
-        </a>{" "}
+        </TextLink>
         that will synchronize Algolia in the background:
       </Text>
       <ul>

apps/search/src/views/configuration/configuration.view.tsx

@@ -6,6 +6,7 @@ import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
 import { WebhooksStatus } from "../../components/WebhooksStatus";
 import { MainInstructions } from "../../components/MainInstructions";
 import { WebhooksStatusInstructions } from "../../components/WebhooksStatusInstructions";
+import { TextLink } from "@saleor/apps-ui";
 
 const ALGOLIA_DASHBOARD_TOKENS_URL = "https://www.algolia.com/account/api-keys/all";
 
@@ -36,22 +37,10 @@ export const ConfigurationView = () => {
               Provide Algolia settings.{" "}
             </Text>
             <Text>
-              You can find your tokens in Algolia Dashboard{" "}
-              <a
-                href={ALGOLIA_DASHBOARD_TOKENS_URL}
-                onClick={(e) => {
-                  e.preventDefault();
-
-                  appBridge?.dispatch(
-                    actions.Redirect({
-                      to: ALGOLIA_DASHBOARD_TOKENS_URL,
-                      newContext: true,
-                    })
-                  );
-                }}
-              >
+              You can find your tokens in Algolia Dashboard
+              <TextLink href={ALGOLIA_DASHBOARD_TOKENS_URL} newTab>
                 here
-              </a>
+              </TextLink>
             </Text>
           </Box>
         }

packages/ui/index.ts

@@ -1 +1,2 @@
+export * from "./src/text-link";
 export * from "./src/semantic-chip";

packages/ui/src/text-link.tsx

@@ -0,0 +1,78 @@
+import { actions, useAppBridge } from "@saleor/app-sdk/app-bridge";
+import { Text, TextProps } from "@saleor/macaw-ui/next";
+import { useRouter } from "next/router";
+
+export interface TextLinkProps extends TextProps {
+  href: string;
+  newTab?: boolean;
+}
+
+const BaseTextLink = (props: TextLinkProps) => {
+  return (
+    <Text
+      target="_blank"
+      as={"a"}
+      textDecoration={"underline"}
+      variant={"bodyStrong"}
+      rel="noopener noreferrer"
+      {...props}
+    >
+      <Text
+        __margin={0}
+        color={"text2Decorative"} /* TODO Color not applied - looks like Macaw issue*/
+      >
+        {props.children}
+      </Text>
+    </Text>
+  );
+};
+
+export const TextLink = ({ href, newTab = false, children, ...props }: TextLinkProps) => {
+  const { appBridge } = useAppBridge();
+  const { push } = useRouter();
+
+  const onNewTabClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    event.preventDefault();
+
+    if (!appBridge) {
+      console.warn(
+        "App bridge is not initialized, TextLink cannot be used with external links without it."
+      );
+    }
+
+    appBridge?.dispatch(
+      actions.Redirect({
+        to: href,
+        newContext: true,
+      })
+    );
+
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  };
+
+  const onInternalClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    event.preventDefault();
+
+    push(href);
+
+    if (props.onClick) {
+      props.onClick(event);
+    }
+  };
+
+  if (newTab) {
+    return (
+      <BaseTextLink href={href} onClick={onNewTabClick} {...props}>
+        {children}
+      </BaseTextLink>
+    );
+  } else {
+    return (
+      <BaseTextLink href={href} onClick={onInternalClick} {...props}>
+        {children}
+      </BaseTextLink>
+    );
+  }
+};