docs: add copy subscriber button (#12405)

* docs: add copy subscriber button

* re-generate

* fixes + update copy button

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

@@ -5,6 +5,7 @@ export * from "./use-click-outside"
 export * from "./use-collapsible"
 export * from "./use-collapsible-code-lines"
 export * from "./use-copy"
+export * from "./use-generate-snippet"
 export * from "./use-heading-url"
 export * from "./use-current-learning-path"
 export * from "./use-is-external-link"

www/packages/docs-ui/src/hooks/use-generate-snippet/index.tsx

@@ -0,0 +1,22 @@
+import {
+  subscriberSnippetGenerator,
+  SubscriberSnippetGeneratorOptions,
+} from "./snippet-generators/subscriber"
+
+export type UseGenerateSnippet = {
+  type: "subscriber"
+  options: SubscriberSnippetGeneratorOptions
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const generators: Record<string, (options: any) => string> = {
+  subscriber: subscriberSnippetGenerator,
+}
+
+export const useGenerateSnippet = ({ type, options }: UseGenerateSnippet) => {
+  const snippet = generators[type](options)
+
+  return {
+    snippet,
+  }
+}

www/packages/docs-ui/src/hooks/use-generate-snippet/snippet-generators/subscriber.ts

@@ -0,0 +1,65 @@
+import { parseEventPayload } from "../../../utils"
+
+export type SubscriberSnippetGeneratorOptions = {
+  event: string
+  payload: Record<string, unknown> | string
+}
+
+export const subscriberSnippetGenerator = ({
+  event,
+  payload: initialPayload,
+}: SubscriberSnippetGeneratorOptions) => {
+  const payload =
+    typeof initialPayload === "string"
+      ? parseEventPayload(initialPayload).payload_for_snippet
+      : initialPayload
+  // format subscriber name
+  const subscriberName =
+    event
+      .split(".")
+      .map((word) =>
+        word.replace(/-./g, (match) => match.charAt(1).toUpperCase())
+      )
+      .map((word, index) => {
+        if (index === 0) {
+          return word.charAt(0).toLowerCase() + word.slice(1)
+        }
+
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      })
+      .join("") + "Handler"
+  // format payload
+  const payloadType: Record<string, unknown> = {}
+  Object.keys(payload).forEach((key) => {
+    const value = payload[key]
+    if (Array.isArray(value)) {
+      payloadType[key] = `${typeof value[0]}[]`
+    } else {
+      payloadType[key] = typeof value
+    }
+  })
+
+  const payloadString = JSON.stringify(payloadType, null, 2).replaceAll(
+    /"/g,
+    ""
+  )
+
+  // return the snippet
+  return subscriberSnippet
+    .replace("{{subscriberName}}", subscriberName)
+    .replace("{{event}}", event)
+    .replace("{{payload}}", payloadString)
+}
+
+const subscriberSnippet = `import { SubscriberArgs, type SubscriberConfig } from "@medusajs/framework"
+
+export default async function {{subscriberName}}({
+  event: { data },
+  container,
+}: SubscriberArgs<{{payload}}>) {
+  // TODO handle event
+}
+
+export const config: SubscriberConfig = {
+  event: "{{event}}",
+}`