feat(web): import statement on the components page (resend#1797)

apps/web/src/components/component-code-view.tsx

@@ -1,20 +1,22 @@
-import * as React from "react";
+import type {
+  CodeVariant,
+  ImportedComponent,
+} from "@/app/components/get-imported-components-for";
+import { useStoredState } from "@/hooks/use-stored-state";
+import { convertUrisIntoUrls } from "@/utils/convert-uris-into-urls";
 import * as Select from "@radix-ui/react-select";
+import * as Tabs from "@radix-ui/react-tabs";
 import {
   CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
   ClipboardIcon,
 } from "lucide-react";
-import * as Tabs from "@radix-ui/react-tabs";
-import type {
-  CodeVariant,
-  ImportedComponent,
-} from "@/app/components/get-imported-components-for";
-import { useStoredState } from "@/hooks/use-stored-state";
-import { convertUrisIntoUrls } from "@/utils/convert-uris-into-urls";
+import * as React from "react";
 import { CodeBlock } from "./code-block";
 import { TabTrigger } from "./tab-trigger";
+import * as allReactEmailComponents from "@react-email/components";
+import * as allReactResponsiveComponents from "@responsive-email/react-email";
 
 type ReactCodeVariant = Exclude<CodeVariant, "html" | "react">;
 
@@ -43,6 +45,34 @@ export const ComponentCodeView = ({
   }
   code = convertUrisIntoUrls(code);
 
+  if (selectedLanguage === "react") {
+    const importsReactResponsive = extractReactComponents(
+      code,
+      Object.keys(allReactResponsiveComponents),
+    );
+
+    const importsReactEmail = extractReactComponents(
+      code,
+      Object.keys(allReactEmailComponents),
+    );
+
+    let importStatements = "";
+
+    if (importsReactEmail.length > 0) {
+      importStatements += `import { ${importsReactEmail.join(
+        ", ",
+      )} } from "@react-email/components";\n`;
+    }
+
+    if (importsReactResponsive.length > 0) {
+      importStatements += `import { ${importsReactResponsive.join(
+        ", ",
+      )} } from "@responsive-email/react-email";\n`;
+    }
+
+    code = `${importStatements}\n${code}`;
+  }
+
   const onCopy = () => {
     void navigator.clipboard.writeText(code);
     setIsCopied(true);
@@ -181,3 +211,25 @@ const ReactVariantSelect = ({
     </Select.Root>
   );
 };
+
+/**
+ * Extracts React component names from a string of React/JSX code
+ */
+const extractReactComponents = (
+  code: string,
+  supportedComponents: string[],
+): string[] => {
+  const componentPattern =
+    /(?:<|import\s+\{?\s*)(?<componentName>[A-Z][a-zA-Z0-9]*)/g;
+  const matches = Array.from(code.matchAll(componentPattern));
+
+  const componentNames = Array.from(
+    new Set(
+      matches
+        .map((match) => match.groups?.componentName)
+        .filter((name): name is string => Boolean(name)),
+    ),
+  );
+
+  return componentNames.filter((name) => supportedComponents.includes(name));
+};