feat(react-email): email resend setup command (#2643)

Author: gabrielmfern

packages/react-email/package.json

@@ -31,6 +31,7 @@
     "@babel/traverse": "^7.27.0",
     "chokidar": "^4.0.3",
     "commander": "^13.0.0",
+    "conf": "^15.0.2",
     "debounce": "^2.0.0",
     "esbuild": "^0.25.0",
     "glob": "^11.0.0",

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

@@ -0,0 +1,22 @@
+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(apiKey: string) {
+  const previousValue = conf.get('resendApiKey');
+  if (typeof previousValue === 'string' && previousValue.length > 0) {
+    const response = await prompts({
+      type: 'confirm',
+      name: 'replaceApiKey',
+      message: `You already have a Resend API Key configured (${styleText('grey', previousValue.slice(0, 11))}...). Do you want to replace it?`,
+      initial: false,
+    });
+    if (!response.replaceApiKey) {
+      process.exit(0);
+    }
+  }
+
+  conf.set('resendApiKey', apiKey);
+  console.info(`${logSymbols.success} Resend integration successfully set up`);
+}

packages/react-email/src/index.ts

@@ -3,6 +3,7 @@ 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 { start } from './commands/start.js';
 import { packageJson } from './utils/packageJson.js';
 
@@ -52,4 +53,13 @@ program
     exportTemplates(outDir, srcDir, { silent, plainText, pretty }),
   );
 
+program
+  .command('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);
+
 program.parse();

packages/react-email/src/utils/__snapshots__/tree.spec.ts.snap

@@ -16,6 +16,7 @@ exports[`tree(__dirname, 2) 1`] = `
 ├── types
 │   ├── hot-reload-change.ts
 │   └── hot-reload-event.ts
+├── conf.ts
 ├── get-emails-directory-metadata.spec.ts
 ├── get-emails-directory-metadata.ts
 ├── get-preview-server-location.ts

packages/react-email/src/utils/conf.ts

@@ -0,0 +1,9 @@
+import Conf from 'conf';
+
+// Just simple encryption. This isn't completely safe
+// because anyone can find this key here
+const encryptionKey = 'h2#x658}1#qY(@!:7,BD1J)q12$[tM25';
+
+export const conf = new Conf<{
+  resendApiKey?: string;
+}>({ projectName: 'react-email', encryptionKey });

packages/react-email/src/utils/style-text.ts

@@ -4,7 +4,7 @@
  */
 import * as nodeUtil from 'node:util';
 
-type StyleTextFunction = (style: string, text: string) => string;
+type StyleTextFunction = typeof nodeUtil.styleText;
 
 export const styleText: StyleTextFunction = (nodeUtil as any).styleText
   ? (nodeUtil as any).styleText