feat: new structure (#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)"],
+    },
+  ],
 };

.gitignore

@@ -28,7 +28,6 @@ out/
 build
 dist
 
-
 # Debug
 npm-debug.log*
 yarn-debug.log*

README.md

@@ -1,13 +1,13 @@
-# React Email with Turborepo + Bun
+# React Email + Turborepo + bun
 
-This example shows how to use React Email with [Turborepo](https://turbo.build) + [Bun](https://bun.sh).
+This example shows how to use React Email with [Turborepo](https://turbo.build) + [bun](https://bun.sh/).
 
 ### 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 @@ bun install
 bun 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
+bun 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

apps/next/app/page.tsx

@@ -1,5 +1,11 @@
+import { render } from '@react-email/components';
+
+import { VercelInviteUserEmail } from 'transactional/emails/vercel-invite-user';
+
 export default function Page(): JSX.Element {
+  const emailHTML = render(VercelInviteUserEmail({ }));
+
   return (
-    <h1>Next.js App</h1>
+    <div dangerouslySetInnerHTML={{ __html: emailHTML }} />
   );
 }

apps/next/package.json

@@ -9,19 +9,19 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@react-email/components": "0.0.12",
     "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",
+    "transactional": "workspace:*",
     "typescript": "^5.2.2"
   }
 }

apps/next/tsconfig.json

@@ -1,6 +1,12 @@
 {
-  "extends": "@repo/typescript-config/nextjs.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true,
     "plugins": [
       {
         "name": "next"