feat: updated turbo and react-email

.gitignore

@@ -2,13 +2,8 @@
 
 # Dependencies
 node_modules
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
+.pnp
+.pnp.js
 
 # Local env files
 .env
@@ -27,7 +22,6 @@ coverage
 .vercel
 
 # Build Outputs
-.react-email/
 .next/
 out/
 build
@@ -42,3 +36,7 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+# ignore other pakcage lock files
+pnpm-lock.yaml
+package-lock.json

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ]
+}

README.md

@@ -1,33 +1,85 @@
-# React Email with Turborepo + yarn
+# Turborepo starter
 
-This example shows how to use React Email with [Turborepo](https://turbo.build) + [yarn](https://yarnpkg.com).
+This is an React email starter Turborepo with yarn.
 
-### Structure
+## Using this example
 
-This monorepo includes the following apps:
+Run the following command:
 
-- `apps/web`: a [Next.js](https://nextjs.org) app
-- `packages/transactional`: a package with [react.email](https://react.email) email templates
+```sh
+npx create-turbo@latest
+```
 
-## Instructions
+## What's inside?
 
-1. Install dependencies:
+This Turborepo includes the following packages/apps:
 
-  ```sh
-yarn
-  ```
+### Apps and Packages
 
-2. Run locally:
+- `web`: another [Next.js](https://nextjs.org/) app
+- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
+- `@repo/tsconfig`: `tsconfig.json`s used throughout the monorepo
+- `@repo/transactional`: [react-email](https://react.email/) react email components
 
-  ```sh
-yarn dev
-  ```
+Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
 
-3. Open URL in the browser:
+### Utilities
 
-* http://localhost:3000
-* http://localhost:3001
+This Turborepo has some additional tools already setup for you:
 
-## License
+- [TypeScript](https://www.typescriptlang.org/) for static type checking
+- [ESLint](https://eslint.org/) for code linting
+- [Prettier](https://prettier.io) for code formatting
 
-MIT License
+### Build
+
+To build all apps and packages, run the following command:
+
+```
+cd turbo-react-email-yarn
+yarn build
+```
+
+### Develop
+
+To develop all apps and packages, run the following command:
+
+```
+cd turbo-react-email-yarn
+pnpm dev
+```
+
+### Remote Caching
+
+> [!TIP]
+> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).
+
+Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+
+By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:
+
+```
+cd turbo-react-email-yarn
+npx turbo login
+```
+
+This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+
+Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+
+```
+npx turbo link
+```
+
+## Useful Links
+
+Learn more about the power of Turborepo:
+
+- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
+- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
+- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
+- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
+- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
+- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+- [React Email](https://react.email/docs)

apps/web/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/web/README.md

@@ -1,17 +1,36 @@
-## NextJS Web app
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/create-next-app).
 
-A simple example NextJS app that imports the email template from the 
-[transactional](../../packages/transactional/readme.md) package and renders 
-it on the index page.
+## Getting Started
 
-### Running app
+First, run the development server:
 
-If you want to run the app individually you can just run:
-
-```sh
+```bash
+npm run dev
+# or
 yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
-## License
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
 
-MIT License
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/web/app/api/send-email/route.ts

@@ -0,0 +1,81 @@
+import { SendEmailCommandInput, SES } from "@aws-sdk/client-ses";
+import { render } from "@react-email/components";
+import VercelInvite from "@repo/transactional/emails/vercel-invite-user";
+import { env } from "@/app/env.mjs";
+import { EmailSchema } from "@/app/types/custom";
+
+const ses = new SES({
+  credentials: {
+    accessKeyId: env.AWS_EMAIL_ACCESS_KEY,
+    secretAccessKey: env.AWS_EMAIL_SECRET_ACCESS_KEY,
+  },
+  region: env.AWS_EMAIL_REGION,
+});
+
+export async function POST(req: Request) {
+  console.log("called post");
+  const body = await req.json();
+  const result = EmailSchema.safeParse(body);
+
+  if (!result.success) {
+    return new Response(JSON.stringify({ error: result.error.issues }), {
+      status: 400,
+      headers: {
+        "content-type": "application/json",
+      },
+    });
+  }
+
+  const { name: NAME, email, subject } = result.data;
+
+  console.log("=================================================");
+  console.log("Name, email, subject", NAME, email, subject);
+  console.log("=================================================");
+  const emailHtml = await render(
+    VercelInvite({
+      username: "alanturing",
+      userImage: `/static/vercel-user.png`,
+      invitedByUsername: "Alan",
+      invitedByEmail: "[email protected]",
+      teamName: "Enigma",
+      teamImage: `/static/vercel-team.png`,
+      inviteLink: "https://vercel.com/teams/invite/foo",
+      inviteFromIp: "204.13.186.218",
+      inviteFromLocation: "São Paulo, Brazil",
+    })
+  );
+
+  const params: SendEmailCommandInput = {
+    Source: "[email protected]",
+    Destination: {
+      ToAddresses: [email],
+    },
+    Message: {
+      Body: {
+        Html: {
+          Charset: "UTF-8",
+          Data: emailHtml,
+        },
+      },
+      Subject: { Charset: "UTF-8", Data: subject },
+    },
+  };
+
+  try {
+    const response = await ses.sendEmail(params);
+    return new Response(JSON.stringify(response), {
+      status: 200,
+      headers: {
+        "content-type": "application/json",
+      },
+    });
+  } catch (error: any) {
+    console.log("error", error);
+    return new Response(error.response, {
+      status: 500,
+      headers: {
+        "content-type": "application/json",
+      },
+    });
+  }
+}