docs: add copy subscriber button (#12405)

* docs: add copy subscriber button

* re-generate

* fixes + update copy button

www/packages/docs-ui/src/components/CopyButton/index.tsx

@@ -5,6 +5,10 @@ import clsx from "clsx"
 import { Tooltip } from "@/components"
 import { useCopy } from "../../hooks"
 
+export type CopyButtonChildFn = (props: {
+  isCopied: boolean
+}) => React.ReactNode
+
 export type CopyButtonProps = {
   text: string
   buttonClassName?: string
@@ -17,7 +21,8 @@ export type CopyButtonProps = {
       | React.TouchEvent<HTMLSpanElement>
   ) => void
   handleTouch?: boolean
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy">
+  children?: React.ReactNode | CopyButtonChildFn
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy" | "children">
 
 export const CopyButton = ({
   text,
@@ -64,7 +69,7 @@ export const CopyButton = ({
           }
         }}
       >
-        {children}
+        {typeof children === "function" ? children({ isCopied }) : children}
       </span>
     </Tooltip>
   )

www/packages/docs-ui/src/components/CopyGeneratedSnippetButton/index.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import React from "react"
+import { CopyButton, useGenerateSnippet, UseGenerateSnippet } from "../.."
+import { SquareTwoStack, CheckCircle } from "@medusajs/icons"
+
+export type CopyGeneratedSnippetButtonProps = UseGenerateSnippet & {
+  tooltipText?: string
+}
+
+export const CopyGeneratedSnippetButton = ({
+  tooltipText,
+  ...props
+}: CopyGeneratedSnippetButtonProps) => {
+  const { snippet } = useGenerateSnippet(props)
+
+  return (
+    <CopyButton
+      text={snippet}
+      tooltipText={tooltipText}
+      className="inline-block w-fit"
+    >
+      {({ isCopied }) => {
+        if (isCopied) {
+          return <CheckCircle />
+        }
+        return <SquareTwoStack />
+      }}
+    </CopyButton>
+  )
+}

www/packages/docs-ui/src/components/Heading/H1/index.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx"
 import React from "react"
 import { LlmDropdown } from "../../LlmDropdown"
 
-type H1Props = React.HTMLAttributes<HTMLHeadingElement> & {
+export type H1Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
   hideLlmDropdown?: boolean
 }

www/packages/docs-ui/src/components/Heading/H2/index.tsx

@@ -5,7 +5,7 @@ import React from "react"
 import { CopyButton, Link } from "@/components"
 import { useHeadingUrl, useLayout } from "../../.."
 
-type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
+export type H2Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
   passRef?: React.RefObject<HTMLHeadingElement | null>
 }

www/packages/docs-ui/src/components/Heading/H3/index.tsx

@@ -5,7 +5,7 @@ import React from "react"
 import { CopyButton, Link } from "@/components"
 import { useHeadingUrl, useLayout } from "../../.."
 
-type H3Props = React.HTMLAttributes<HTMLHeadingElement> & {
+export type H3Props = React.HTMLAttributes<HTMLHeadingElement> & {
   id?: string
 }
 

www/packages/docs-ui/src/components/Heading/H4/index.tsx

@@ -7,7 +7,7 @@ export const H4 = ({
 }: React.HTMLAttributes<HTMLHeadingElement>) => {
   return (
     <h4
-      className={clsx("mb-docs_0.5 text-medusa-fg-base text-h4", className)}
+      className={clsx("mb-docs_1 text-medusa-fg-base text-h4", className)}
       {...props}
     />
   )

www/packages/docs-ui/src/components/LlmDropdown/index.tsx

@@ -3,9 +3,8 @@
 import React, { useRef, useState } from "react"
 import { useAiAssistant, useSiteConfig } from "../../providers"
 import { usePathname } from "next/navigation"
-import { Button } from "../Button"
 import { AiAssistent, Book } from "@medusajs/icons"
-import { Menu } from "../Menu"
+import { DropdownMenu, Menu } from "../Menu"
 import { MarkdownIcon } from "../Icons/Markdown"
 import { useAiAssistantChat } from "../../providers/AiAssistant/Chat"
 import clsx from "clsx"
@@ -30,43 +29,41 @@ export const LlmDropdown = () => {
   const pageUrl = `${baseUrl}${basePath}${pathname}`
 
   return (
-    <div className="relative hidden md:block">
-      <Button
-        variant="transparent"
-        onClick={() => setOpen(!open)}
-        className="!p-[6px] text-medusa-fg-subtle"
-        buttonRef={ref}
-      >
-        <Book />
-      </Button>
-      <Menu
-        items={[
-          {
-            type: "link",
-            title: "View as Markdown",
-            link: `${pageUrl}/index.html.md`,
-            icon: <MarkdownIcon width={19} height={19} />,
-            openInNewTab: true,
-          },
-          {
-            type: "action",
-            title: "Ask AI Assistant",
-            action: () => {
-              if (loading) {
-                return
-              }
-              setQuestion(`Explain the page ${pageUrl}`)
-              setChatOpened(true)
-              setOpen(false)
+    <DropdownMenu
+      open={open}
+      setOpen={setOpen}
+      dropdownButtonContent={<Book />}
+      menuComponent={
+        <Menu
+          items={[
+            {
+              type: "link",
+              title: "View as Markdown",
+              link: `${pageUrl}/index.html.md`,
+              icon: <MarkdownIcon width={19} height={19} />,
+              openInNewTab: true,
             },
-            icon: <AiAssistent />,
-          },
-        ]}
-        className={clsx(
-          "absolute right-0 top-[calc(100%+8px)] w-max",
-          !open && "hidden"
-        )}
-      />
-    </div>
+            {
+              type: "action",
+              title: "Ask AI Assistant",
+              action: () => {
+                if (loading) {
+                  return
+                }
+                setQuestion(`Explain the page ${pageUrl}`)
+                setChatOpened(true)
+                setOpen(false)
+              },
+              icon: <AiAssistent />,
+            },
+          ]}
+          className={clsx(
+            "absolute right-0 top-[calc(100%+8px)] w-max",
+            !open && "hidden"
+          )}
+        />
+      }
+      className="hidden md:block"
+    />
   )
 }

www/packages/docs-ui/src/components/Menu/Dropdown/index.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import React from "react"
+import { useRef, useState } from "react"
+import { Button, Menu, useClickOutside } from "../../.."
+import { MenuItem } from "types"
+import clsx from "clsx"
+
+type DropdownMenuProps = {
+  dropdownButtonContent: React.ReactNode
+  dropdownButtonClassName?: string
+  menuComponent?: React.ReactNode
+  menuItems?: MenuItem[]
+  menuClassName?: string
+  className?: string
+  open?: boolean
+  setOpen?: (open: boolean) => void
+}
+
+export const DropdownMenu = ({
+  dropdownButtonContent,
+  dropdownButtonClassName,
+  menuComponent,
+  menuItems,
+  menuClassName,
+  className,
+  open: externalOpen = false,
+  setOpen: externalSetOpen,
+}: DropdownMenuProps) => {
+  const [open, setOpen] = useState(externalOpen)
+  const ref = useRef<HTMLButtonElement | null>(null)
+  function changeOpenState(newOpenState: boolean) {
+    if (externalSetOpen) {
+      externalSetOpen(newOpenState)
+    } else {
+      setOpen(newOpenState)
+    }
+  }
+  useClickOutside({
+    elmRef: ref,
+    onClickOutside: () => {
+      changeOpenState(false)
+    },
+  })
+
+  if (!menuComponent && !menuItems) {
+    return null
+  }
+
+  return (
+    <div className={clsx("relative", className)}>
+      <Button
+        variant="transparent"
+        onClick={() => changeOpenState(!open)}
+        className={clsx(
+          "!p-[6px] text-medusa-fg-subtle",
+          dropdownButtonClassName
+        )}
+        buttonRef={ref}
+      >
+        {dropdownButtonContent}
+      </Button>
+      {menuComponent}
+      {!menuComponent && menuItems && (
+        <Menu
+          items={menuItems}
+          className={clsx(
+            "absolute right-0 top-[calc(100%+8px)] w-max",
+            !open && "hidden",
+            menuClassName
+          )}
+        />
+      )}
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Menu/index.tsx

@@ -39,3 +39,5 @@ export const Menu = ({ items, className, itemsOnClick }: MenuProps) => {
     </div>
   )
 }
+
+export * from "./Dropdown"

www/packages/docs-ui/src/components/index.ts

@@ -15,6 +15,7 @@ export * from "./CodeMdx"
 export * from "./CodeTabs"
 export * from "./CodeTabs/Item"
 export * from "./CopyButton"
+export * from "./CopyGeneratedSnippetButton"
 export * from "./Details"
 export * from "./Details/Summary"
 export * from "./DetailsList"