feat(react-email): better resend integration flow (#2647)

Co-authored-by: Zeno Rocha <zno.rocha@gmail.com>

Author: gabrielmfern

.changeset/cold-olives-begin.md

@@ -0,0 +1,5 @@
+---
+"react-email": patch
+---
+
+improved integration setup flow

.changeset/early-paths-cross.md

@@ -0,0 +1,5 @@
+---
+"@react-email/preview-server": patch
+---
+
+advise `npx` to run email setup command

packages/preview-server/src/components/toolbar.tsx

@@ -3,6 +3,7 @@
 import * as Tabs from '@radix-ui/react-tabs';
 import { LayoutGroup } from 'framer-motion';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import type { ComponentProps } from 'react';
 import * as React from 'react';
 import type { CompatibilityCheckingResult } from '../actions/email-validation/check-compatibility';
 import { isBuilding } from '../app/env';
@@ -183,7 +184,7 @@ const ToolbarInner = ({
                   (activeTab === 'compatibility' &&
                     'The Compatibility tab shows how well the HTML/CSS is supported across mail clients like Outlook, Gmail, etc. Powered by Can I Email.') ||
                   (activeTab === 'resend' &&
-                    "The Resend tab allows you to upload your React Email's HTML using the Templates API. It does not yet upload with variables.") ||
+                    'The Resend tab allows you to upload your React Email code using the Resend Templates API.') ||
                   'Info'
                 }
               >
@@ -288,9 +289,12 @@ const ToolbarInner = ({
               ) : (
                 <SuccessWrapper>
                   <SuccessTitle>Connect to Resend</SuccessTitle>
-                  <SuccessDescription>
-                    Run <CodeSnippet>email resend setup re_xxxxxx</CodeSnippet>{' '}
-                    to connect your Resend account and refresh.
+                  <SuccessDescription className="max-w-lg">
+                    Run{' '}
+                    <CodeSnippet>
+                      npx react-email@latest resend setup
+                    </CodeSnippet>{' '}
+                    on your terminal to connect your Resend account.
                   </SuccessDescription>
                 </SuccessWrapper>
               )}
@@ -340,15 +344,34 @@ const SuccessIcon = () => {
   );
 };
 
-const SuccessTitle = ({ children }) => {
+const SuccessTitle = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<'h3'>) => {
   return (
-    <h3 className="text-slate-12 font-medium text-base mb-1">{children}</h3>
+    <h3
+      className={cn('text-slate-12 font-medium text-base mb-1', className)}
+      {...props}
+    >
+      {children}
+    </h3>
   );
 };
 
-const SuccessDescription = ({ children }) => {
+const SuccessDescription = ({
+  children,
+  className,
+  ...props
+}: ComponentProps<'p'>) => {
   return (
-    <p className="text-slate-11 text-sm text-center max-w-[320px]">
+    <p
+      className={cn(
+        'text-slate-11 text-sm text-center max-w-[320px]',
+        className,
+      )}
+      {...props}
+    >
       {children}
     </p>
   );

packages/react-email/src/commands/resend-setup.ts

@@ -0,0 +1,8 @@
+import logSymbols from 'log-symbols';
+import { conf } from '../../utils/conf.js';
+
+export async function resendReset() {
+  conf.delete('resendApiKey');
+
+  console.info(`${logSymbols.success} Resend API Key successfully deleted`);
+}

packages/react-email/src/commands/resend/reset.ts

@@ -0,0 +1,29 @@
+import logSymbols from 'log-symbols';
+import prompts from 'prompts';
+import { conf } from '../../utils/conf.js';
+import { styleText } from '../../utils/style-text.js';
+
+export async function resendSetup() {
+  const previousValue = conf.get('resendApiKey');
+  if (typeof previousValue === 'string' && previousValue.length > 0) {
+    console.info(
+      `You already have a Resend API Key configured (${styleText('grey', previousValue.slice(0, 11))}...), continuing will replace it.`,
+    );
+  }
+
+  const { apiKey } = await prompts({
+    type: 'password',
+    name: 'apiKey',
+    message: 'Enter your API Key (make sure it has "Full Access")',
+  });
+
+  if (apiKey?.trim().length > 0) {
+    conf.set('resendApiKey', apiKey);
+    console.info(
+      `${logSymbols.success} Resend integration successfully set up`,
+    );
+    console.info(
+      `You can always remove it with ${styleText('green', 'npx react-email@latest resend reset')}`,
+    );
+  }
+}

packages/react-email/src/commands/resend/setup.ts

@@ -3,7 +3,8 @@ import { program } from 'commander';
 import { build } from './commands/build.js';
 import { dev } from './commands/dev.js';
 import { exportTemplates } from './commands/export.js';
-import { resendSetup } from './commands/resend-setup.js';
+import { resendReset } from './commands/resend/reset.js';
+import { resendSetup } from './commands/resend/setup.js';
 import { start } from './commands/start.js';
 import { packageJson } from './utils/packageJson.js';
 
@@ -53,13 +54,18 @@ program
     exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
   );
 
-program
-  .command('resend')
+const resend = program.command('resend');
+
+resend
   .command('setup')
   .description(
     'Sets up the integration between the React Email CLI, and your Resend account through an API Key',
   )
-  .argument('apiKey', 'API Key for use setting up the integration')
   .action(resendSetup);
 
+resend
+  .command('reset')
+  .description('Deletes your API Key from the React Email configuration')
+  .action(resendReset);
+
 program.parse();