From e751459b4d711bdd179a611c167a6194fabe65bf Mon Sep 17 00:00:00 2001 From: Lukasz Ostrowski Date: Tue, 16 May 2023 21:07:08 +0200 Subject: [PATCH] Add TextLink component (#468) * feat: :sparkles: add empty packages/ui * feat: :alembic: move taxes app-grid to packages/ui * build: :arrow_up: upgrade macaw-ui in packages/ui * build: :arrow_up: upgrade macaw even harder * add app sdk * Fix app-sdk version * Add TextLink * Add TextLink * Change method name * Cleanup --------- Co-authored-by: Adrian Pilarczyk --- .changeset/mighty-eels-live.md | 5 ++ .changeset/quick-rules-doubt.md | 5 ++ apps/search/next.config.js | 2 +- .../src/components/MainInstructions.tsx | 25 +----- .../configuration/configuration.view.tsx | 19 +---- packages/ui/index.ts | 1 + packages/ui/src/text-link.tsx | 78 +++++++++++++++++++ 7 files changed, 98 insertions(+), 37 deletions(-) create mode 100644 .changeset/mighty-eels-live.md create mode 100644 .changeset/quick-rules-doubt.md create mode 100644 packages/ui/src/text-link.tsx diff --git a/.changeset/mighty-eels-live.md b/.changeset/mighty-eels-live.md new file mode 100644 index 0000000..7bf80c2 --- /dev/null +++ b/.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 diff --git a/.changeset/quick-rules-doubt.md b/.changeset/quick-rules-doubt.md new file mode 100644 index 0000000..eafcfe2 --- /dev/null +++ b/.changeset/quick-rules-doubt.md @@ -0,0 +1,5 @@ +--- +"saleor-app-search": minor +--- + +Use TextLink component from shared package diff --git a/apps/search/next.config.js b/apps/search/next.config.js index 8d3ee7d..4f637e1 100644 --- a/apps/search/next.config.js +++ b/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` diff --git a/apps/search/src/components/MainInstructions.tsx b/apps/search/src/components/MainInstructions.tsx index 42898f7..5610ca8 100644 --- a/apps/search/src/components/MainInstructions.tsx +++ b/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 ( @@ -17,25 +15,10 @@ export const MainInstructions = ({ children, ...props }: PropsWithBox<{}>) => { Saleor database. - The app supports following{" "} - { - 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 + events - {" "} + that will synchronize Algolia in the background:
    diff --git a/apps/search/src/views/configuration/configuration.view.tsx b/apps/search/src/views/configuration/configuration.view.tsx index 1703842..e32d4f6 100644 --- a/apps/search/src/views/configuration/configuration.view.tsx +++ b/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.{" "} - You can find your tokens in Algolia Dashboard{" "} - { - e.preventDefault(); - - appBridge?.dispatch( - actions.Redirect({ - to: ALGOLIA_DASHBOARD_TOKENS_URL, - newContext: true, - }) - ); - }} - > + You can find your tokens in Algolia Dashboard + here - + } diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 795ca82..8e7235a 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -1 +1,2 @@ +export * from "./src/text-link"; export * from "./src/semantic-chip"; diff --git a/packages/ui/src/text-link.tsx b/packages/ui/src/text-link.tsx new file mode 100644 index 0000000..172c598 --- /dev/null +++ b/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 ( + + + {props.children} + + + ); +}; + +export const TextLink = ({ href, newTab = false, children, ...props }: TextLinkProps) => { + const { appBridge } = useAppBridge(); + const { push } = useRouter(); + + const onNewTabClick = (event: React.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) => { + event.preventDefault(); + + push(href); + + if (props.onClick) { + props.onClick(event); + } + }; + + if (newTab) { + return ( + + {children} + + ); + } else { + return ( + + {children} + + ); + } +};