docs(share): 📝 Add code blocks in embed instructions

apps/builder/components/share/codeSnippets/ReactCode.tsx

@@ -0,0 +1,154 @@
+import { FlexProps } from '@chakra-ui/react'
+import React from 'react'
+import { BubbleParams, IframeParams, PopupParams } from 'typebot-js'
+import {
+  parseInitBubbleCode,
+  parseInitContainerCode,
+  parseInitPopupCode,
+} from './params'
+import parserBabel from 'prettier/parser-babel'
+import prettier from 'prettier/standalone'
+import { CodeEditor } from 'components/shared/CodeEditor'
+import { useTypebot } from 'contexts/TypebotContext'
+
+type StandardReactDivProps = { widthLabel: string; heightLabel: string }
+export const StandardReactDiv = ({
+  widthLabel,
+  heightLabel,
+}: StandardReactDivProps) => {
+  const { typebot } = useTypebot()
+  const snippet = prettier.format(
+    parseContainerSnippet({
+      publishId: typebot?.publicId ?? '',
+      heightLabel,
+      widthLabel,
+    }),
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+  return <CodeEditor value={snippet} lang="js" isReadOnly />
+}
+
+type SnippetProps = IframeParams &
+  Pick<StandardReactDivProps, 'widthLabel' | 'heightLabel'>
+
+const parseContainerSnippet = ({
+  publishId,
+  customDomain,
+  backgroundColor,
+  hiddenVariables,
+  ...embedProps
+}: SnippetProps): string => {
+  const jsCode = parseInitContainerCode({
+    publishId,
+    customDomain,
+    backgroundColor,
+    hiddenVariables,
+  })
+  return `import {initContainer} from "typebot-js";
+
+      const Component = () => {
+        useEffect(()=> {
+          ${jsCode}
+        }, [])
+
+        return <div id="typebot-container" style={{width: "${embedProps.widthLabel}", height: "${embedProps.heightLabel}"}} />
+      }`
+}
+
+type PopupEmbedCodeProps = {
+  delay: number
+  withStarterVariables?: boolean
+}
+
+export const PopupReactCode = ({ delay }: PopupEmbedCodeProps & FlexProps) => {
+  const { typebot } = useTypebot()
+  const snippet = prettier.format(
+    parsePopupSnippet({
+      publishId: typebot?.publicId ?? '',
+      delay,
+    }),
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+  return <CodeEditor value={snippet} lang="js" isReadOnly />
+}
+
+const parsePopupSnippet = ({
+  publishId,
+  customDomain,
+  backgroundColor,
+  hiddenVariables,
+  delay,
+}: PopupParams): string => {
+  const jsCode = parseInitPopupCode({
+    publishId,
+    customDomain,
+    backgroundColor,
+    hiddenVariables,
+    delay,
+  })
+  return `import {initPopup} from "typebot-js";
+
+      const Component = () => {
+        useEffect(()=> {
+          ${jsCode}
+        }, [])
+
+        return <></>;
+      }`
+}
+
+type ChatEmbedCodeProps = {
+  withStarterVariables?: boolean
+} & Pick<BubbleParams, 'button' | 'proactiveMessage'>
+
+export const ChatReactCode = ({
+  proactiveMessage,
+  button,
+}: ChatEmbedCodeProps & FlexProps) => {
+  const { typebot } = useTypebot()
+  const snippet = prettier.format(
+    parseBubbleSnippet({
+      publishId: typebot?.publicId ?? '',
+      button,
+      proactiveMessage,
+    }),
+    {
+      parser: 'babel',
+      plugins: [parserBabel],
+    }
+  )
+  return <CodeEditor value={snippet} lang="js" isReadOnly />
+}
+
+const parseBubbleSnippet = ({
+  publishId,
+  customDomain,
+  backgroundColor,
+  hiddenVariables,
+  proactiveMessage,
+  button,
+}: BubbleParams): string => {
+  const jsCode = parseInitBubbleCode({
+    publishId,
+    customDomain,
+    backgroundColor,
+    hiddenVariables,
+    proactiveMessage,
+    button,
+  })
+  return `import {initBubble} from "typebot-js";
+
+      const Component = () => {
+        useEffect(()=> {
+          ${jsCode}
+        }, [])
+
+        return <></>
+      }`
+}