@react-email/preview-server 4.1.0-canary.9 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @react-email/preview-server
 
+## 4.1.1
+
+## 4.1.0
+
+### Patch Changes
+
+- e173b44: Use the same version for the preview-server and react-email
+- e33be94: fix range rounded borders, tearing when selecting different lines
+- 87b9601: infinte fetches due to improper effect dependency
+
+## 4.1.0-canary.12
+
+### Patch Changes
+
+- e33be94: fix range rounded borders, tearing when selecting different lines
+- 87b9601: infinte fetches due to improper effect dependency
+
+## 4.1.0-canary.11
+
+### Patch Changes
+
+- 272b21e: fix the forced `color-scheme: dark` for the preview
+
+## 4.1.0-canary.10
+
+### Patch Changes
+
+- caa4a31: fix hot reloading with collapsed directories
+
 ## 4.1.0-canary.9
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-email/preview-server",
-  "version": "4.1.0-canary.9",
+  "version": "4.1.1",
   "description": "A live preview of your emails right in your browser.",
   "main": "./index.mjs",
   "dependencies": {
@@ -61,7 +61,7 @@
     "postcss": "8.5.3",
     "tailwindcss": "3.4.0",
     "typescript": "5.8.3",
-    "@react-email/components": "0.1.0-canary.4"
+    "@react-email/components": "0.2.0"
   },
   "license": "MIT",
   "repository": {
@@ -73,9 +73,11 @@
     "access": "public"
   },
   "scripts": {
-    "caniemail:fetch": "node ./scripts/fill-caniemail-data.mjs",
+    "build": "tsx ./scripts/build-preview-server.mts",
+    "caniemail:fetch": "tsx ./scripts/fill-caniemail-data.mts",
     "clean": "rm -rf dist",
-    "build": "node ./scripts/build-preview-server.mjs",
+    "dev": "tsx ./scripts/dev.mts",
+    "dev:seed": "tsx ./scripts/seed.mts",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/readme.md

@@ -0,0 +1,35 @@
+<div align="center"><strong>@react-email/preview-server</strong></div>
+<div align="center">A live preview of your emails right in your browser.</div>
+<br />
+<div align="center">
+<a href="https://react.email">Website</a> 
+<span> · </span>
+<a href="https://github.com/resend/react-email">GitHub</a> 
+<span> · </span>
+<a href="https://react.email/discord">Discord</a>
+</div>
+
+This package is used to store the preview server, it is also published and versioned so that it can be installed when the [CLI](../react-email) is being used.
+
+## Development workflow
+
+### 1. Seed email templates
+
+```sh
+pnpm dev:seed
+```
+
+This generates a boilerplate emails directory for you to work with. These files can also be modified as you see fit since they are not included in git.
+
+### 2. Run development server
+
+```sh
+pnpm dev
+```
+
+This is somewhat equivalent to `next dev` and does not support hot reloading for email templates like the CLI does. It lets you work on the UI for the preview server mainly.
+
+### 3. Open in your browser
+
+Go to http://localhost:3000
+

package/scripts/dev.mts

@@ -0,0 +1,47 @@
+import child_process from 'node:child_process';
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+
+const filename = url.fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+const previewServerRoot = path.resolve(dirname, '..');
+const emailsDirectoryPath = path.join(previewServerRoot, 'emails');
+
+const envPath = path.join(previewServerRoot, '.env.local');
+
+await fs.writeFile(
+  envPath,
+  `EMAILS_DIR_RELATIVE_PATH=./emails
+EMAILS_DIR_ABSOLUTE_PATH=${emailsDirectoryPath}
+USER_PROJECT_LOCATION=${previewServerRoot}
+NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT=true`,
+  'utf8',
+);
+
+const webServerProcess = child_process.spawn('next', ['dev'], {
+  cwd: previewServerRoot,
+  shell: true,
+  stdio: 'inherit',
+});
+
+webServerProcess.on('exit', async () => {
+  await fs.rm(envPath);
+});
+
+process.on('SIGINT', () => {
+  webServerProcess.kill('SIGINT');
+});
+process.on('SIGUSR1', () => {
+  webServerProcess.kill('SIGUSR1');
+});
+process.on('SIGUSR2', () => {
+  webServerProcess.kill('SIGUSR2');
+});
+process.on('uncaughtExceptionMonitor', () => {
+  webServerProcess.kill();
+});
+process.on('exit', () => {
+  webServerProcess.kill();
+});

package/scripts/{fill-caniemail-data.mjs → fill-caniemail-data.mts}

@@ -14,11 +14,6 @@ This could be happneing for the following reasons:
 - You don't have internet connectivity
 - Caniemail is down
 - Caniemail changed from where to fetch their data from, which means we need to fix this. If this is the case, please open up an issue.`,
-    {
-      cause: {
-        responseFromCaniemail,
-      },
-    },
   );
 }
 

package/scripts/seed.mts

@@ -0,0 +1,21 @@
+import { existsSync, promises as fs } from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+
+const filename = url.fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+
+const previewServerRoot = path.resolve(dirname, '..');
+const emailsDirectoryPath = path.join(previewServerRoot, 'emails');
+
+const seedPath = path.join(dirname, './utils/default-seed/');
+
+if (existsSync(emailsDirectoryPath)) {
+  console.info('Deleting previous emails directory');
+  await fs.rm(emailsDirectoryPath, { recursive: true, force: true });
+}
+
+console.info('Copying over the defalt seed to the emails directory');
+await fs.cp(seedPath, emailsDirectoryPath, {
+  recursive: true,
+});

package/scripts/utils/default-seed/auth/account-confirmation.tsx

@@ -0,0 +1,68 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Row,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+interface AccountConfirmationProps {
+  confirmLink: string;
+  expiryTime: string;
+}
+
+export default function AccountConfirmation({
+  confirmLink,
+  expiryTime,
+}: AccountConfirmationProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>Confirm your React Email account</Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center my-[48px] text-[32px]">
+              Welcome to React Email!
+            </Heading>
+            <Text>
+              Thank you for signing up! To complete your registration and start
+              using React Email, please confirm your email address.
+            </Text>
+            <Text className="mb-6">
+              Click the button below to verify your email. This link will expire
+              in {expiryTime}.
+            </Text>
+            <Row className="w-full">
+              <Column className="w-full">
+                <Button
+                  href={confirmLink}
+                  className="bg-cyan-300 text-[20px] font-bold text-[#404040] w-full text-center border border-solid border-cyan-900 py-[8px] rounded-[8px]"
+                >
+                  Confirm Email
+                </Button>
+              </Column>
+            </Row>
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+AccountConfirmation.PreviewProps = {
+  confirmLink: 'https://react.email/confirm/123',
+  expiryTime: '24 hours',
+} satisfies AccountConfirmationProps;

package/scripts/utils/default-seed/auth/forgot-password.tsx

@@ -0,0 +1,71 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Row,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+interface ForgotPasswordProps {
+  resetLink: string;
+  expiryTime: string;
+}
+
+export default function ForgotPassword({
+  resetLink,
+  expiryTime,
+}: ForgotPasswordProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>Reset your React Email password</Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center my-[48px] text-[32px]">
+              Reset Your Password
+            </Heading>
+            <Text>
+              We received a request to reset your password for your React Email
+              account.
+            </Text>
+            <Text>
+              Click the button below to create a new password. This link will
+              expire in {expiryTime}.
+            </Text>
+            <Text className="mb-6">
+              If you didn't request this, you can safely ignore this email.
+            </Text>
+            <Row className="w-full">
+              <Column className="w-full">
+                <Button
+                  href={resetLink}
+                  className="bg-cyan-300 text-[20px] font-bold text-[#404040] w-full text-center border border-solid border-cyan-900 py-[8px] rounded-[8px]"
+                >
+                  Reset Password
+                </Button>
+              </Column>
+            </Row>
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+ForgotPassword.PreviewProps = {
+  resetLink: 'https://react.email/reset-password/123',
+  expiryTime: '1 hour',
+} satisfies ForgotPasswordProps;

package/scripts/utils/default-seed/communications/payment-overdue.tsx

@@ -0,0 +1,82 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Row,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+interface PaymentOverdueProps {
+  customerName: string;
+  amount: string;
+  dueDate: string;
+  invoiceLink: string;
+}
+
+export default function PaymentOverdue({
+  customerName,
+  amount,
+  dueDate,
+  invoiceLink,
+}: PaymentOverdueProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>Payment of {amount} is overdue - Action required</Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center my-[48px] text-[32px]">
+              Payment Overdue
+            </Heading>
+            <Text>Dear {customerName},</Text>
+            <Text>
+              We noticed that your payment of {amount} was due on {dueDate} and
+              has not been received yet.
+            </Text>
+            <Text>
+              To avoid any service interruption, please process your payment as
+              soon as possible.
+            </Text>
+            <Text className="mb-6">
+              You can view and pay your invoice by clicking the button below:
+            </Text>
+            <Row className="w-full">
+              <Column className="w-full">
+                <Button
+                  href={invoiceLink}
+                  className="bg-cyan-300 text-[20px] font-bold text-[#404040] w-full text-center border border-solid border-cyan-900 py-[8px] rounded-[8px]"
+                >
+                  Pay Now
+                </Button>
+              </Column>
+            </Row>
+            <Text className="mt-6">
+              If you have already made this payment, please disregard this
+              message.
+            </Text>
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+PaymentOverdue.PreviewProps = {
+  customerName: 'Jane Smith',
+  amount: '$99.00',
+  dueDate: 'June 1st, 2024',
+  invoiceLink: 'https://react.email/invoice/123',
+} satisfies PaymentOverdueProps;

package/scripts/utils/default-seed/communications/team-invite.tsx

@@ -0,0 +1,78 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Row,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+interface TeamInviteProps {
+  inviterName: string;
+  teamName: string;
+  inviteLink: string;
+  role: string;
+}
+
+export default function TeamInvite({
+  inviterName,
+  teamName,
+  inviteLink,
+  role,
+}: TeamInviteProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>
+            {inviterName} has invited you to join {teamName} on React Email
+          </Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center my-[48px] text-[32px]">
+              You've been invited!
+            </Heading>
+            <Text>
+              {inviterName} has invited you to join {teamName} as a {role}.
+            </Text>
+            <Text>
+              React Email helps teams collaborate on email templates and manage
+              their email campaigns effectively.
+            </Text>
+            <Text className="mb-6">
+              Click the button below to accept the invitation and get started:
+            </Text>
+            <Row className="w-full">
+              <Column className="w-full">
+                <Button
+                  href={inviteLink}
+                  className="bg-cyan-300 text-[20px] font-bold text-[#404040] w-full text-center border border-solid border-cyan-900 py-[8px] rounded-[8px]"
+                >
+                  Accept Invitation
+                </Button>
+              </Column>
+            </Row>
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+TeamInvite.PreviewProps = {
+  inviterName: 'John Doe',
+  teamName: 'Marketing Team',
+  inviteLink: 'https://react.email/join/team/123',
+  role: 'Editor',
+} satisfies TeamInviteProps;

package/scripts/utils/default-seed/communications/webhooks-failed.tsx

@@ -0,0 +1,89 @@
+import {
+  Body,
+  CodeBlock,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Tailwind,
+  Text,
+  vesper,
+} from '@react-email/components';
+
+interface WebhooksFailedProps {
+  date: string;
+  error: {
+    error: string;
+    timestamp: string;
+    webhookId: string;
+    details: {
+      reason: string;
+      retryCount: number;
+      lastAttempt: string;
+    };
+  };
+}
+
+export default function WebhooksFailed({ date, error }: WebhooksFailedProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>Some webhooks failed to deliver at {date}</Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center text-[32px]">
+              Failed webhook attempt
+            </Heading>
+            <Text>
+              We encountered an issue with some of our webhooks. Please check
+              the logs for more details. Here is the data for the error:
+            </Text>
+            <CodeBlock
+              code={JSON.stringify(error, null, 2)}
+              language="json"
+              theme={vesper}
+              style={{
+                padding: '16px',
+                borderRadius: '8px',
+              }}
+              lineNumbers
+            />
+            <Text className="mb-6">
+              If you have any questions or need assistance, please reach out to
+              us at{' '}
+              <a
+                href="mailto:support@react.email"
+                className="text-cyan-300 underline"
+              >
+                support@react.email
+              </a>
+              .
+            </Text>
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+WebhooksFailed.PreviewProps = {
+  date: 'June 4th, 202',
+  error: {
+    error: 'Webhook delivery failed',
+    timestamp: '2023-10-01T12:00:00Z',
+    webhookId: 'wh_1234567890',
+    details: {
+      reason: 'Network error',
+      retryCount: 3,
+      lastAttempt: '2023-10-01T12:05:00Z',
+    },
+  },
+} satisfies WebhooksFailedProps;

package/scripts/utils/default-seed/feedback-request.tsx

@@ -0,0 +1,78 @@
+import {
+  Body,
+  Button,
+  Column,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Preview,
+  Row,
+  Tailwind,
+  Text,
+} from '@react-email/components';
+
+interface FeedbackRequestProps {
+  name: string;
+}
+
+export default function FeedbackRequest({ name }: FeedbackRequestProps) {
+  return (
+    <Html>
+      <Head />
+      <Tailwind>
+        <Body className="bg-black text-white">
+          <Preview>
+            Thank you for using our service. We would love to hear your
+            feedback.
+          </Preview>
+          <Container className="mx-auto">
+            <Heading className="font-bold text-center my-[48px] text-[32px]">
+              Hello {name},
+            </Heading>
+            <Text>
+              Thank you for using our service. We would love to hear your
+              thoughts and suggestions.
+            </Text>
+            <Text>
+              We work hard to improve our service and your feedback is crucial
+              for us to understand what we are doing well and where we can
+              improve.
+            </Text>
+            <Text className="mb-6">
+              If you have any questions about the service or need assistance,
+              please feel free to reach out to us at{' '}
+              <a
+                href="mailto:support@react.email"
+                className="text-cyan-300 underline"
+              >
+                support@react.email
+              </a>
+              .
+            </Text>
+            <Row className="w-full">
+              <Column className="w-full">
+                <Button
+                  href="https://react.email"
+                  className="bg-cyan-300 text-[20px] font-bold text-[#404040] w-full text-center border border-solid border-cyan-900 py-[8px] rounded-[8px]"
+                >
+                  Give Feedback
+                </Button>
+              </Column>
+            </Row>
+            <Text className="mt-6">- React Email team</Text>
+            <Hr style={{ borderTopColor: '#404040' }} />
+            <Text className="text-[#606060] font-bold">
+              React Email, 999 React St, Email City, EC 12345
+            </Text>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+}
+
+FeedbackRequest.PreviewProps = {
+  name: 'user',
+} satisfies FeedbackRequestProps;