feat: same structure as the yarn turborepo example (#2)

.eslintrc.js

@@ -1,10 +1,34 @@
-// This configuration only applies to the package manager root.
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  ignorePatterns: ["apps/**", "packages/**"],
-  extends: ["@repo/eslint-config/library.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
+  extends: ["eslint:recommended", "prettier"],
+  plugins: ["only-warn"],
+  globals: {
+    React: true,
+    JSX: true,
   },
+  env: {
+    node: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+    "dist/",
+  ],
+  overrides: [
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+    },
+  ],
 };

README.md

@@ -1,13 +1,13 @@
-# React Email with Turborepo + pnpm
+# React Email with Turborepo + yarn
 
-This example shows how to use React Email with [Turborepo](https://turbo.build) + [pnpm](https://pnpm.io).
+This example shows how to use React Email with [Turborepo](https://turbo.build) + [yarn](https://yarnpkg.com).
 
 ### Structure
 
 This monorepo includes the following apps:
 
-- `apps/next`: a [Next.js](https://nextjs.org) app
-- `apps/react-email`: a [react.email](https://react.email) app
+- `apps/web`: a [Next.js](https://nextjs.org) app
+- `packages/transactional`: a package with [react.email](https://react.email) email templates
 
 ## Instructions
 
@@ -23,11 +23,11 @@ pnpm install
 pnpm dev
   ```
 
-4. Open URLs in the browser:
+3. Open URL in the browser:
 
 * http://localhost:3000
 * http://localhost:3001
 
 ## License
 
-MIT License
+MIT License

apps/next/.eslintrc.js

@@ -1,9 +1,34 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  root: true,
-  extends: ["@repo/eslint-config/next.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
+  extends: [
+    "eslint:recommended",
+    "prettier",
+    require.resolve("@vercel/style-guide/eslint/next")
+  ],
+  parser: '@typescript-eslint/parser',
+  globals: {
+    React: true,
+    JSX: true,
   },
+  env: {
+    node: true,
+  },
+  plugins: ["only-warn", "@typescript-eslint"],
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+  ],
+  overrides: [{ files: ["*.js?(x)", "*.ts?(x)"] }],
 };

apps/next/README.md

@@ -1,28 +1,17 @@
-## Getting Started
+## NextJS Web app
 
-First, run the development server:
+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.
 
-```bash
-yarn dev
-```
-
-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.
-
-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:3000/api/hello](http://localhost:3000/api/hello).
+### Running app
 
-## Learn More
+If you want to run the app individually you can just run:
 
-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
+```sh
+pnpm dev
+```
 
-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.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+MIT License

package.json

@@ -2,13 +2,22 @@
   "name": "react-email-turborepo-pnpm-example",
   "private": true,
   "scripts": {
-    "build": "turbo build",
+    "build": "turbo build --filter=!react-email-client",
     "dev": "turbo dev --filter=!react-email-client",
-    "lint": "turbo lint",
+    "lint": "turbo lint --filter=!react-email-client",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
     "prettier": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "@vercel/style-guide": "^5.1.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-config-turbo": "^1.10.12",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "next": "^14.0.3",
+    "styled-jsx": "^5.1.2",
+    "typescript": "^5.2.2",
     "turbo": "latest"
   },
   "packageManager": "[email protected]"

packages/transactional/readme.md

@@ -1,26 +1,34 @@
-# React Email Starter
+## Transactional
 
-A live preview right in your browser so you don't need to keep sending real emails during development.
+This is usually where you store transactional-related code of your application to organize and simplify things.
+This also allows for using the email templates you make anywhere on your codebase by just installing with
+the monorepo setup.
 
-## Getting Started
+This also uses the [react.email](https://react.email/) CLI for previewing and compiling the email templates
+into HTML ones.
+
+Using the CLI you can also preview your emails, see how they are going to look and try sending them
+to yourself for testing purposes.
+
+### Previewing email templates
 
 First, install the dependencies:
 
 ```sh
-npm install
-# or
-yarn
+pnpm install
 ```
 
-Then, run the development server:
+Then, you can run the react.email developmenet server by running:
 
 ```sh
-npm run dev
-# or
-yarn dev
+pnpm dev
 ```
 
-Open [localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [localhost:3001](http://localhost:3001) with your browser to see the result.
+
+---
+
+See the [react.email docs](https://react.email/docs/introduction) for more details.
 
 ## License