diff --git a/.gitignore b/.gitignore
index 96fab4f..21894fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,7 @@ coverage
.vercel
# Build Outputs
+.react-email/
.next/
out/
build
diff --git a/README.md b/README.md
index bc389a0..9d17c79 100644
--- a/README.md
+++ b/README.md
@@ -1,81 +1,33 @@
-# Turborepo starter
+# React Email with Turborepo + npm
-This is an official starter Turborepo.
+This example shows how to use React Email with [Turborepo](https://turbo.build) + [npm](https://npmjs.com).
-## Using this example
+### Structure
-Run the following command:
+This monorepo includes the following apps:
-```sh
-npx create-turbo@latest
-```
+- `apps/next`: a [Next.js](https://nextjs.org) app
+- `apps/react-email`: a [react.email](https://react.email) app
-## What's inside?
+## Instructions
-This Turborepo includes the following packages/apps:
+1. Install dependencies:
-### Apps and Packages
+ ```sh
+npm install
+ ```
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `ui`: a stub React component library shared by both `web` and `docs` applications
-- `eslint-config-custom`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `tsconfig`: `tsconfig.json`s used throughout the monorepo
+2. Run locally:
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+ ```sh
+npm run dev
+ ```
-### Utilities
+4. Open URLs in the browser:
-This Turborepo has some additional tools already setup for you:
+* http://localhost:3000
+* http://localhost:3001
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+## License
-### Build
-
-To build all apps and packages, run the following command:
-
-```
-cd my-turborepo
-pnpm build
-```
-
-### Develop
-
-To develop all apps and packages, run the following command:
-
-```
-cd my-turborepo
-pnpm dev
-```
-
-### Remote Caching
-
-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), then enter the following commands:
-
-```
-cd my-turborepo
-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)
+MIT License
\ No newline at end of file
diff --git a/apps/docs/README.md b/apps/docs/README.md
deleted file mode 100644
index d364535..0000000
--- a/apps/docs/README.md
+++ /dev/null
@@ -1,28 +0,0 @@
-## Getting Started
-
-First, run the development server:
-
-```bash
-yarn dev
-```
-
-Open [http://localhost:3001](http://localhost:3001) 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.
-
-To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3001/api/hello](http://localhost:3001/api/hello).
-
-## 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/foundations/about-nextjs) - 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_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/apps/docs/app/favicon.ico b/apps/docs/app/favicon.ico
deleted file mode 100644
index 3f804c0..0000000
Binary files a/apps/docs/app/favicon.ico and /dev/null differ
diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
deleted file mode 100644
index 8eee6cb..0000000
--- a/apps/docs/app/globals.css
+++ /dev/null
@@ -1,50 +0,0 @@
-:root {
- --max-width: 1100px;
- --border-radius: 12px;
- --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
- "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
- "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
-
- --callout-rgb: 20, 20, 20;
- --callout-border-rgb: 108, 108, 108;
- --card-rgb: 100, 100, 100;
- --card-border-rgb: 200, 200, 200;
-
- --glow-conic: conic-gradient(
- from 180deg at 50% 50%,
- #2a8af6 0deg,
- #a853ba 180deg,
- #e92a67 360deg
- );
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
deleted file mode 100644
index 5f90d11..0000000
--- a/apps/docs/app/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import "./globals.css";
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
- title: "Create Turborepo",
- description: "Generated by create turbo",
-};
-
-export default function RootLayout({
- children,
-}: {
- children: React.ReactNode;
-}): JSX.Element {
- return (
-
- {children}
-
- );
-}
diff --git a/apps/docs/app/page.module.css b/apps/docs/app/page.module.css
deleted file mode 100644
index 0d8ed7e..0000000
--- a/apps/docs/app/page.module.css
+++ /dev/null
@@ -1,303 +0,0 @@
-.main {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
- padding: 6rem;
- min-height: 100vh;
-}
-
-.vercelLogo {
- filter: invert(1);
-}
-
-.description {
- display: inherit;
- justify-content: inherit;
- align-items: inherit;
- font-size: 0.85rem;
- max-width: var(--max-width);
- width: 100%;
- z-index: 2;
- font-family: var(--font-mono);
-}
-
-.description a {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 0.5rem;
-}
-
-.description p {
- position: relative;
- margin: 0;
- padding: 1rem;
- background-color: rgba(var(--callout-rgb), 0.5);
- border: 1px solid rgba(var(--callout-border-rgb), 0.3);
- border-radius: var(--border-radius);
-}
-
-.code {
- font-weight: 700;
- font-family: var(--font-mono);
-}
-
-.hero {
- display: flex;
- position: relative;
- place-items: center;
-}
-
-.heroContent {
- display: flex;
- position: relative;
- z-index: 0;
- padding-bottom: 4rem;
- flex-direction: column;
- gap: 2rem;
- justify-content: space-between;
- align-items: center;
- width: auto;
- font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
- "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol", "Noto Color Emoji";
- padding-top: 48px;
-
- @media (min-width: 768px) {
- padding-top: 4rem;
- padding-bottom: 6rem;
- }
- @media (min-width: 1024px) {
- padding-top: 5rem;
- padding-bottom: 8rem;
- }
-}
-
-.logos {
- display: flex;
- z-index: 50;
- justify-content: center;
- align-items: center;
- width: 100%;
-}
-
-.grid {
- display: grid;
- grid-template-columns: repeat(4, minmax(25%, auto));
- max-width: 100%;
- width: var(--max-width);
-}
-
-.card {
- padding: 1rem 1.2rem;
- border-radius: var(--border-radius);
- background: rgba(var(--card-rgb), 0);
- border: 1px solid rgba(var(--card-border-rgb), 0);
- transition: background 200ms, border 200ms;
-}
-
-.card span {
- display: inline-block;
- transition: transform 200ms;
-}
-
-.card h2 {
- font-weight: 600;
- margin-bottom: 0.7rem;
-}
-
-.card p {
- margin: 0;
- opacity: 0.6;
- font-size: 0.9rem;
- line-height: 1.5;
- max-width: 30ch;
-}
-
-@media (prefers-reduced-motion) {
- .card:hover span {
- transform: none;
- }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
- .content {
- padding: 4rem;
- }
-
- .grid {
- grid-template-columns: 1fr;
- margin-bottom: 120px;
- max-width: 320px;
- text-align: center;
- }
-
- .card {
- padding: 1rem 2.5rem;
- }
-
- .card h2 {
- margin-bottom: 0.5rem;
- }
-
- .center {
- padding: 8rem 0 6rem;
- }
-
- .center::before {
- transform: none;
- height: 300px;
- }
-
- .description {
- font-size: 0.8rem;
- }
-
- .description a {
- padding: 1rem;
- }
-
- .description p,
- .description div {
- display: flex;
- justify-content: center;
- position: fixed;
- width: 100%;
- }
-
- .description p {
- align-items: center;
- inset: 0 0 auto;
- padding: 2rem 1rem 1.4rem;
- border-radius: 0;
- border: none;
- border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
- background: linear-gradient(
- to bottom,
- rgba(var(--background-start-rgb), 1),
- rgba(var(--callout-rgb), 0.5)
- );
- background-clip: padding-box;
- backdrop-filter: blur(24px);
- }
-
- .description div {
- align-items: flex-end;
- pointer-events: none;
- inset: auto 0 0;
- padding: 2rem;
- height: 200px;
- background: linear-gradient(
- to bottom,
- transparent 0%,
- rgb(var(--background-end-rgb)) 40%
- );
- z-index: 1;
- }
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
- .card:hover {
- background: rgba(var(--card-rgb), 0.1);
- border: 1px solid rgba(var(--card-border-rgb), 0.15);
- }
-
- .card:hover span {
- transform: translateX(4px);
- }
-}
-
-.circles {
- position: absolute;
- min-width: 614px;
- min-height: 614px;
-}
-
-.logo {
- z-index: 50;
- width: 120px;
- height: 120px;
-}
-
-.logoGradientContainer {
- display: flex;
- position: absolute;
- z-index: 50;
- justify-content: center;
- align-items: center;
- width: 16rem;
- height: 16rem;
-}
-
-.turborepoWordmarkContainer {
- display: flex;
- z-index: 50;
- padding-left: 1.5rem;
- padding-right: 1.5rem;
- flex-direction: column;
- gap: 1.25rem;
- justify-content: center;
- align-items: center;
- text-align: center;
-
- @media (min-width: 1024px) {
- gap: 1.5rem;
- }
-}
-
-.turborepoWordmark {
- width: 160px;
- fill: white;
-
- @media (min-width: 768px) {
- width: 200px;
- }
-}
-
-.code {
- font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
- monospace;
- font-weight: 700;
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
- .grid {
- grid-template-columns: repeat(2, 50%);
- }
-}
-
-/* Gradients */
-.gradient {
- position: absolute;
- mix-blend-mode: normal;
- will-change: filter;
-}
-
-.gradientSmall {
- filter: blur(32px);
-}
-
-.gradientLarge {
- filter: blur(75px);
-}
-
-.glowConic {
- background-image: var(--glow-conic);
-}
-
-.logoGradient {
- opacity: 0.9;
- width: 120px;
- height: 120px;
-}
-
-.backgroundGradient {
- top: -500px;
- width: 1000px;
- height: 1000px;
- opacity: 0.15;
-}
diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
deleted file mode 100644
index 5c92172..0000000
--- a/apps/docs/app/page.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import Image from "next/image";
-import { Card } from "@repo/ui/card";
-import { Code } from "@repo/ui/code";
-import styles from "./page.module.css";
-
-function Gradient({
- conic,
- className,
- small,
-}: {
- small?: boolean;
- conic?: boolean;
- className?: string;
-}): JSX.Element {
- return (
-
- );
-}
-
-const LINKS = [
- {
- title: "Docs",
- href: "https://turbo.build/repo/docs",
- description: "Find in-depth information about Turborepo features and API.",
- },
- {
- title: "Learn",
- href: "https://turbo.build/repo/docs/handbook",
- description: "Learn more about monorepos with our handbook.",
- },
- {
- title: "Templates",
- href: "https://turbo.build/repo/docs/getting-started/from-example",
- description: "Choose from over 15 examples and deploy with a single click.",
- },
- {
- title: "Deploy",
- href: "https://vercel.com/new",
- description:
- " Instantly deploy your Turborepo to a shareable URL with Vercel.",
- },
-];
-
-export default function Page(): JSX.Element {
- return (
-
-
-
- examples/basic
- docs
-
-
-
-
-
-
-
-
-
-
-
- {LINKS.map(({ title, href, description }) => (
-
- {description}
-
- ))}
-
-
- );
-}
diff --git a/apps/docs/next.config.js b/apps/docs/next.config.js
deleted file mode 100644
index a5b0aec..0000000
--- a/apps/docs/next.config.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('next').NextConfig} */
-module.exports = {
- transpilePackages: ["@repo/ui"],
-};
diff --git a/apps/docs/package.json b/apps/docs/package.json
deleted file mode 100644
index 4535186..0000000
--- a/apps/docs/package.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
- "name": "docs",
- "version": "1.0.0",
- "private": true,
- "scripts": {
- "dev": "next dev --port 3001",
- "build": "next build",
- "start": "next start",
- "lint": "eslint . --max-warnings 0"
- },
- "dependencies": {
- "@repo/ui": "*",
- "next": "^14.0.3",
- "react": "^18.2.0",
- "react-dom": "^18.2.0"
- },
- "devDependencies": {
- "@next/eslint-plugin-next": "^14.0.2",
- "@repo/eslint-config": "*",
- "@repo/typescript-config": "*",
- "@types/eslint": "^8.44.7",
- "@types/node": "^17.0.12",
- "@types/react": "^18.0.22",
- "@types/react-dom": "^18.0.7",
- "eslint": "^8.53.0",
- "typescript": "^5.2.2"
- }
-}
diff --git a/apps/docs/public/circles.svg b/apps/docs/public/circles.svg
deleted file mode 100644
index 6533be5..0000000
--- a/apps/docs/public/circles.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
\ No newline at end of file
diff --git a/apps/docs/public/next.svg b/apps/docs/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/apps/docs/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/docs/public/turborepo.svg b/apps/docs/public/turborepo.svg
deleted file mode 100644
index 2f9aa1f..0000000
--- a/apps/docs/public/turborepo.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-
diff --git a/apps/docs/public/vercel.svg b/apps/docs/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/apps/docs/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/apps/docs/.eslintrc.js b/apps/next/.eslintrc.js
similarity index 100%
rename from apps/docs/.eslintrc.js
rename to apps/next/.eslintrc.js
diff --git a/apps/web/README.md b/apps/next/README.md
similarity index 100%
rename from apps/web/README.md
rename to apps/next/README.md
diff --git a/apps/next/app/layout.tsx b/apps/next/app/layout.tsx
new file mode 100644
index 0000000..a14e64f
--- /dev/null
+++ b/apps/next/app/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+ title: 'Next.js',
+ description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/apps/next/app/page.tsx b/apps/next/app/page.tsx
new file mode 100644
index 0000000..5925d30
--- /dev/null
+++ b/apps/next/app/page.tsx
@@ -0,0 +1,5 @@
+export default function Page(): JSX.Element {
+ return (
+ Next.js App
+ );
+}
diff --git a/apps/docs/next-env.d.ts b/apps/next/next-env.d.ts
similarity index 100%
rename from apps/docs/next-env.d.ts
rename to apps/next/next-env.d.ts
diff --git a/apps/next/next.config.js b/apps/next/next.config.js
new file mode 100644
index 0000000..d1e4e08
--- /dev/null
+++ b/apps/next/next.config.js
@@ -0,0 +1,2 @@
+/** @type {import('next').NextConfig} */
+module.exports = {};
diff --git a/apps/web/package.json b/apps/next/package.json
similarity index 94%
rename from apps/web/package.json
rename to apps/next/package.json
index 3cc241c..7d35ef3 100644
--- a/apps/web/package.json
+++ b/apps/next/package.json
@@ -1,5 +1,5 @@
{
- "name": "web",
+ "name": "next",
"version": "1.0.0",
"private": true,
"scripts": {
@@ -9,7 +9,6 @@
"lint": "eslint . --max-warnings 0"
},
"dependencies": {
- "@repo/ui": "*",
"next": "^14.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
diff --git a/apps/docs/tsconfig.json b/apps/next/tsconfig.json
similarity index 100%
rename from apps/docs/tsconfig.json
rename to apps/next/tsconfig.json
diff --git a/apps/react-email/emails/vercel-invite-user.tsx b/apps/react-email/emails/vercel-invite-user.tsx
new file mode 100644
index 0000000..16ba091
--- /dev/null
+++ b/apps/react-email/emails/vercel-invite-user.tsx
@@ -0,0 +1,136 @@
+import {
+ Body,
+ Button,
+ Column,
+ Container,
+ Head,
+ Heading,
+ Hr,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Row,
+ Section,
+ Tailwind,
+ Text,
+} from '@react-email/components';
+import * as React from 'react';
+
+interface VercelInviteUserEmailProps {
+ username?: string;
+ userImage?: string;
+ invitedByUsername?: string;
+ invitedByEmail?: string;
+ teamName?: string;
+ teamImage?: string;
+ inviteLink?: string;
+ inviteFromIp?: string;
+ inviteFromLocation?: string;
+}
+
+const baseUrl = process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : '';
+
+export const VercelInviteUserEmail = ({
+ username = 'zenorocha',
+ userImage = `${baseUrl}/static/vercel-user.png`,
+ invitedByUsername = 'bukinoshita',
+ invitedByEmail = 'bukinoshita@example.com',
+ teamName = 'My Project',
+ teamImage = `${baseUrl}/static/vercel-team.png`,
+ inviteLink = 'https://vercel.com/teams/invite/foo',
+ inviteFromIp = '204.13.186.218',
+ inviteFromLocation = 'São Paulo, Brazil',
+}: VercelInviteUserEmailProps) => {
+ const previewText = `Join ${invitedByUsername} on Vercel`;
+
+ return (
+
+
+