Merge branch 'main' into logical-seq

Author: Sonkaryasshu

.changeset/config.json

@@ -2,9 +2,7 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": "@changesets/cli/changelog",
   "commit": false,
-  "fixed": [
-    ["react-email-starter", "create-email"]
-  ],
+  "fixed": [["react-email-starter", "create-email"]],
   "linked": [],
   "access": "public",
   "baseBranch": "main",

.github/workflows/bump-canary.yml

@@ -15,16 +15,16 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v4
 
-      - name: Setup Node.js 20
+      - name: Setup Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Enable Corepack
         id: pnpm-setup
         run: |
           corepack enable
-          corepack prepare pnpm@latest --activate
+          corepack prepare pnpm@9.15.0 --activate
           pnpm config set script-shell "/usr/bin/bash"
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 

.github/workflows/bump-stable.yml

@@ -15,16 +15,16 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@v4
 
-      - name: Setup Node.js 20
+      - name: Setup Node.js 22
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
 
       - name: Enable Corepack
         id: pnpm-setup
         run: |
           corepack enable
-          corepack prepare pnpm@latest --activate
+          corepack prepare pnpm@9.15.0 --activate
           pnpm config set script-shell "/usr/bin/bash"
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 

.github/workflows/tests.yml

@@ -5,40 +5,10 @@ on:
       - main
   pull_request:
 jobs:
-  format:
-    runs-on: buildjet-4vcpu-ubuntu-2204
-    container:
-      image: node:18
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Enable Corepack
-        id: pnpm-setup
-        run: |
-          corepack enable
-          corepack prepare pnpm@latest --activate
-          pnpm config set script-shell "/usr/bin/bash"
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - name: pnpm Cache
-        uses: buildjet/cache@v4
-        with:
-          path: ${{ steps.pnpm-setup.outputs.pnpm_cache_dir }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install packages
-        run: pnpm install --frozen-lockfile
-
-      - name: Run Format Check
-        run: pnpm format:check
-
-  test:
+  lint:
     runs-on: buildjet-4vcpu-ubuntu-2204
     container:
-      image: node:18
+      image: node:22
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -47,7 +17,7 @@ jobs:
         id: pnpm-setup
         run: |
           corepack enable
-          corepack prepare pnpm@latest --activate
+          corepack prepare pnpm@9.15.0 --activate
           pnpm config set script-shell "/usr/bin/bash"
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
@@ -65,13 +35,13 @@ jobs:
       - name: Run Build
         run: pnpm build
 
-      - name: Run Tests
-        run: pnpm test
+      - name: Run Lint
+        run: pnpm lint
 
-  lint:
+  test:
     runs-on: buildjet-4vcpu-ubuntu-2204
     container:
-      image: node:18
+      image: node:22
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -80,7 +50,7 @@ jobs:
         id: pnpm-setup
         run: |
           corepack enable
-          corepack prepare pnpm@latest --activate
+          corepack prepare pnpm@9.15.0 --activate
           pnpm config set script-shell "/usr/bin/bash"
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 
@@ -98,13 +68,16 @@ jobs:
       - name: Run Build
         run: pnpm build
 
-      - name: Run Lint
-        run: pnpm lint
+      - name: Run Tests
+        run: pnpm test
+        env:  
+          SPAM_ASSASSIN_HOST: ${{ secrets.SPAM_ASSASSIN_HOST }}
+          SPAM_ASSASSIN_PORT: ${{ secrets.SPAM_ASSASSIN_PORT }}
 
   build:
     runs-on: buildjet-4vcpu-ubuntu-2204
     container:
-      image: node:18
+      image: node:22
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -113,7 +86,7 @@ jobs:
         id: pnpm-setup
         run: |
           corepack enable
-          corepack prepare pnpm@latest --activate
+          corepack prepare pnpm@9.15.0 --activate
           pnpm config set script-shell "/usr/bin/bash"
           echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
 

.prettierignore

@@ -1,28 +1,23 @@
-## Contributing
+Thank you for considering contributing to React Email.
 
-Wanna help? Awesome! There are many ways you can contribute.
+We've created this guide to help you better understand how to contribute to the project, even if you've never contributed to an open source project before.
 
-## Improving the docs
+## How to report bugs
 
-Documentation is extremely important and takes a fair deal of time and effort to write and keep updated. Everything is written in Markdown to facilitate the process of contributing.
+To report a bug, please first read our guide on [opening issues](https://react.email/docs/contributing/opening-issues).
 
-## Building new components
+## How to contribute code
 
-We’re open to expanding the catalog of components to cover as many use cases as possible. We suggest to open an issue for discussion first to make sure your idea is aligned with the project goals.
+To open a pull request, please first read our guide on [opening pull requests](https://react.email/docs/contributing/opening-pull-requests), which outlines our process for RFCs and pull requests.
 
-## Opening issues
+### Codebase overview
+If you need help getting familiar with our codebase, we recommend reading our [Codebase overview guide](https://react.email/docs/contributing/codebase-overview).
 
-Open an issue to report bugs or to propose new features.
+### Development workflow guide
+We have also created a Development workflow guide to help you get familiar with the development workflow for React Email. It includes instructions for:
+1. [Setting up your development environment](https://react.email/docs/contributing/development-workflow/1-setup)
+2. [Running tests](https://react.email/docs/contributing/development-workflow/2-running-tests)
+3. [Linting](https://react.email/docs/contributing/development-workflow/3-linting)
+4. [Building](https://react.email/docs/contributing/development-workflow/4-building)
+5. [Writing documentation](https://react.email/docs/contributing/development-workflow/5-writing-docs)
 
-**- Reporting bugs:**
-describe the bug as clearly as you can, including steps to reproduce, what happened and what you were expecting to happen. Also include browser version, OS and other related software’s (npm, Node.js, etc) versions when applicable.
-
-**- Suggesting features:** explain the proposed feature, what it should do, why it is useful, how users should use it. Give us as much info as possible so it will be easier to discuss, access and implement the proposed feature. When you’re unsure about a certain aspect of the feature, feel free to leave it open for others to discuss and find an appropriate solution.
-
-## Proposing pull requests
-
-Pull requests are very welcome. Note that if you are going to propose drastic changes, be sure to open an issue for discussion first, to make sure that your PR will be accepted before you spend effort coding it.
-
-**- Forking the repository:** clone it locally and create a branch for your proposed bug fix or new feature. Avoid working directly on the main branch.
-
-**- Making changes:** implement your bug fix or feature, write tests to cover it and make sure all tests are passing. Then commit your changes, push your bug fix/feature branch to the origin (your forked repo) and open a pull request to the upstream (the repository you originally forked)‘s main branch.

.prettierrc

@@ -10,25 +10,24 @@ import {
   Preview,
   Section,
   Text,
-} from "@react-email/components";
-import * as React from "react";
+} from '@react-email/components';
 
 interface AWSVerifyEmailProps {
   verificationCode?: string;
 }
 
 const baseUrl = process.env.VERCEL_URL
   ? `https://${process.env.VERCEL_URL}`
-  : "";
+  : '';
 
 export default function AWSVerifyEmail({
-  verificationCode = "596853",
+  verificationCode,
 }: AWSVerifyEmailProps) {
   return (
     <Html>
       <Head />
-      <Preview>AWS Email Verification</Preview>
       <Body style={main}>
+        <Preview>AWS Email Verification</Preview>
         <Container style={container}>
           <Section style={coverSection}>
             <Section style={imageSection}>
@@ -68,11 +67,11 @@ export default function AWSVerifyEmail({
             This message was produced and distributed by Amazon Web Services,
             Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
             Services, Inc.. All rights reserved. AWS is a registered trademark
-            of{" "}
+            of{' '}
             <Link href="https://amazon.com" target="_blank" style={link}>
               Amazon.com
             </Link>
-            , Inc. View our{" "}
+            , Inc. View our{' '}
             <Link href="https://amazon.com" target="_blank" style={link}>
               privacy policy
             </Link>
@@ -84,89 +83,93 @@ export default function AWSVerifyEmail({
   );
 }
 
+AWSVerifyEmail.PreviewProps = {
+  verificationCode: '596853',
+} satisfies AWSVerifyEmailProps;
+
 const main = {
-  backgroundColor: "#fff",
-  color: "#212121",
+  backgroundColor: '#fff',
+  color: '#212121',
 };
 
 const container = {
-  padding: "20px",
-  margin: "0 auto",
-  backgroundColor: "#eee",
+  padding: '20px',
+  margin: '0 auto',
+  backgroundColor: '#eee',
 };
 
 const h1 = {
-  color: "#333",
+  color: '#333',
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: "20px",
-  fontWeight: "bold",
-  marginBottom: "15px",
+  fontSize: '20px',
+  fontWeight: 'bold',
+  marginBottom: '15px',
 };
 
 const link = {
-  color: "#2754C5",
+  color: '#2754C5',
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: "14px",
-  textDecoration: "underline",
+  fontSize: '14px',
+  textDecoration: 'underline',
 };
 
 const text = {
-  color: "#333",
+  color: '#333',
   fontFamily:
     "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-  fontSize: "14px",
-  margin: "24px 0",
+  fontSize: '14px',
+  margin: '24px 0',
 };
 
 const imageSection = {
-  backgroundColor: "#252f3d",
-  display: "flex",
-  padding: "20px 0",
-  alignItems: "center",
-  justifyContent: "center",
+  backgroundColor: '#252f3d',
+  display: 'flex',
+  padding: '20px 0',
+  alignItems: 'center',
+  justifyContent: 'center',
 };
 
-const coverSection = { backgroundColor: "#fff" };
+const coverSection = { backgroundColor: '#fff' };
 
-const upperSection = { padding: "25px 35px" };
+const upperSection = { padding: '25px 35px' };
 
-const lowerSection = { padding: "25px 35px" };
+const lowerSection = { padding: '25px 35px' };
 
 const footerText = {
   ...text,
-  fontSize: "12px",
-  padding: "0 20px",
+  fontSize: '12px',
+  padding: '0 20px',
 };
 
 const verifyText = {
   ...text,
   margin: 0,
-  fontWeight: "bold",
-  textAlign: "center" as const,
+  fontWeight: 'bold',
+  textAlign: 'center' as const,
 };
 
 const codeText = {
   ...text,
-  fontWeight: "bold",
-  fontSize: "36px",
-  margin: "10px 0",
-  textAlign: "center" as const,
+  fontWeight: 'bold',
+  fontSize: '36px',
+  margin: '10px 0',
+  textAlign: 'center' as const,
 };
 
 const validityText = {
   ...text,
-  margin: "0px",
-  textAlign: "center" as const,
+  margin: '0px',
+  textAlign: 'center' as const,
 };
 
 const verificationSection = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
 };
 
-const mainText = { ...text, marginBottom: "14px" };
+const mainText = { ...text, marginBottom: '14px' };
 
-const cautionText = { ...text, margin: "0px" };
+const cautionText = { ...text, margin: '0px' };