@raypx-kit/email-preview 0.0.0-alpha.0

package/dist/ui/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <script>(function(){
+  var options = {"key":"raypx-email-theme","fallback":"system","colors":{"light":"oklch(1 0 0)","dark":"oklch(0.145 0 0)"}};
+  function valid(value) { return value === "light" || value === "dark" || value === "system"; }
+  var theme = options.fallback;
+  if (options.key !== false) {
+    var stored;
+    try { stored = window.localStorage.getItem(options.key); } catch(e) {}
+    if (valid(stored)) theme = stored;
+    else {
+      try {
+        var parts = document.cookie.split(";");
+        var key = encodeURIComponent(options.key);
+        for (var i = 0; i < parts.length; i++) {
+          var split = parts[i].indexOf("=");
+          if (split < 0 || parts[i].slice(0, split).trim() !== key) continue;
+          var cookie = decodeURIComponent(parts[i].slice(split + 1).trim());
+          if (valid(cookie)) theme = cookie;
+          break;
+        }
+      } catch(e) {}
+    }
+  }
+  if (theme === "system") {
+    theme = "light";
+    try { if (window.matchMedia("(prefers-color-scheme: dark)").matches) theme = "dark"; } catch(e) {}
+  }
+  var root = document.documentElement;
+  root.dataset.theme = theme;
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+  root.style.colorScheme = theme;
+  var meta = document.querySelector('meta[name="theme-color"]');
+  if (!meta) {
+    meta = document.createElement("meta");
+    meta.setAttribute("name", "theme-color");
+    document.head.appendChild(meta);
+  }
+  meta.setAttribute("content", options.colors[theme]);
+})();</script>
+
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Preview and inspect your local React Email templates." />
+    <meta name="robots" content="noindex, nofollow" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d4fc2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"
+    />
+    <title>Email preview · Raypx Kit</title>
+    <script type="module" crossorigin src="./assets/index-Hn03Ok93.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BbjBen8c.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/examples/_components/footer.tsx

@@ -0,0 +1,12 @@
+import { Hr, Text } from "@react-email/components";
+
+export function Footer() {
+  return (
+    <>
+      <Hr style={{ borderColor: "#e7e9ef", marginTop: "32px" }} />
+      <Text style={{ color: "#8590a3", fontSize: "12px", lineHeight: "18px" }}>
+        Raypx · A little space for your next idea.
+      </Text>
+    </>
+  );
+}

package/examples/account/password-reset.jsx

@@ -0,0 +1,58 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Preview,
+  Text,
+} from "@react-email/components";
+import { Footer } from "../_components/footer";
+
+export default function PasswordReset({ resetUrl }) {
+  return (
+    <Html>
+      <Head />
+      <Preview>A fresh start for your password.</Preview>
+      <Body
+        style={{
+          backgroundColor: "#f4f5f7",
+          fontFamily: "Arial, sans-serif",
+          padding: "36px 16px",
+        }}
+      >
+        <Container
+          style={{
+            backgroundColor: "#ffffff",
+            borderRadius: "12px",
+            padding: "36px",
+            maxWidth: "560px",
+          }}
+        >
+          <Heading style={{ color: "#182033", fontSize: "26px" }}>Reset your password</Heading>
+          <Text style={{ color: "#586174", fontSize: "16px", lineHeight: "26px" }}>
+            We received a request to reset your password. This link is valid for 30 minutes.
+          </Text>
+          <Button
+            href={resetUrl}
+            style={{
+              backgroundColor: "#315ee7",
+              borderRadius: "8px",
+              color: "#ffffff",
+              padding: "14px 22px",
+            }}
+          >
+            Choose a new password
+          </Button>
+          <Text style={{ color: "#586174", fontSize: "14px", lineHeight: "22px" }}>
+            If you did not request this, you can safely ignore this email.
+          </Text>
+          <Footer />
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+PasswordReset.PreviewProps = { resetUrl: "https://example.com/reset?token=preview" };

package/examples/static/mark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" role="img" aria-label="Raypx">
+  <rect width="36" height="36" rx="10" fill="#315ee7" />
+  <path d="M11 25V11h8a5 5 0 0 1 0 10h-4v4zm4-8h4a1 1 0 0 0 0-2h-4z" fill="#fff" />
+  <path d="m20 19 6 6h-5l-5-6z" fill="#fff" />
+</svg>

package/examples/vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath } from "node:url";
+import { defineConfig } from "vite-plus";
+import { emailPreview } from "../src/index.js";
+import type { InternalOptions } from "../src/server/plugin.js";
+
+// Previews these examples with the package source and its built interface.
+export default defineConfig({
+  root: fileURLToPath(new URL(".", import.meta.url)),
+  resolve: { tsconfigPaths: true },
+  server: { host: "127.0.0.1", port: 3001, strictPort: true },
+  plugins: [
+    emailPreview({
+      dir: ".",
+      base: "/",
+      interfaceDirectory: fileURLToPath(new URL("../dist/ui", import.meta.url)),
+    } as InternalOptions),
+  ],
+});

package/examples/welcome.tsx

@@ -0,0 +1,64 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Html,
+  Img,
+  Preview,
+  Text,
+} from "@react-email/components";
+import { Footer } from "./_components/footer";
+
+interface WelcomeProps {
+  name: string;
+}
+
+export default function Welcome({ name }: WelcomeProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>Your next idea starts here.</Preview>
+      <Body
+        style={{
+          backgroundColor: "#f4f5f7",
+          fontFamily: "Arial, sans-serif",
+          padding: "36px 16px",
+        }}
+      >
+        <Container
+          style={{
+            backgroundColor: "#ffffff",
+            borderRadius: "12px",
+            padding: "36px",
+            maxWidth: "560px",
+          }}
+        >
+          <Img src="/static/mark.svg" width="36" height="36" alt="Raypx" />
+          <Heading style={{ color: "#182033", fontSize: "28px", marginTop: "28px" }}>
+            Welcome, {name}.
+          </Heading>
+          <Text style={{ color: "#586174", fontSize: "16px", lineHeight: "26px" }}>
+            Your workspace is ready. Make a little room for your next big idea.
+          </Text>
+          <Button
+            href="https://example.com/workspace"
+            style={{
+              backgroundColor: "#315ee7",
+              borderRadius: "8px",
+              color: "#ffffff",
+              padding: "14px 22px",
+              marginTop: "12px",
+            }}
+          >
+            Open your workspace
+          </Button>
+          <Footer />
+        </Container>
+      </Body>
+    </Html>
+  );
+}
+
+Welcome.PreviewProps = { name: "Alex" } satisfies WelcomeProps;

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@raypx-kit/email-preview",
+  "version": "0.0.0-alpha.0",
+  "description": "Preview React Email templates in a Vite dev server or a standalone CLI.",
+  "homepage": "https://github.com/raypx/raypx-kit/tree/canary/packages/email-preview",
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Zack",
+    "email": "heyloyep@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/raypx/raypx-kit.git",
+    "directory": "packages/email-preview"
+  },
+  "files": [
+    "dist",
+    "examples",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "type": "module",
+  "imports": {
+    "#components/*": "./src/ui/components/*.tsx",
+    "#lib/*": "./src/ui/lib/*.ts",
+    "#hooks/*": "./src/ui/hooks/*.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "check": "bun --check --tsconfig-override tsconfig.json",
+    "build": "tsdown && vp build",
+    "dev": "bun run build && vp dev --config examples/vite.config.ts",
+    "test": "bun --bun vp test --run",
+    "test:unit": "bun --bun vp test --run",
+    "pack:check": "bun pm pack --dry-run",
+    "test:e2e": "bun ../../e2e/run.ts --project email-preview"
+  },
+  "dependencies": {
+    "@react-email/render": "^2.1.1",
+    "prettier": "^3.9.10"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.64.1",
+    "@raypx-kit/themes": "workspace:*",
+    "@raypx-kit/tsconfig": "workspace:*",
+    "@raypx-kit/ui": "workspace:*",
+    "@react-email/components": "^1.0.12",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-router": "^1.170.45",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "^0.23.1",
+    "typescript": "^7.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@^1.3.0",
+    "vite-plus": "^1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^8.0.0"
+  },
+  "engines": {
+    "node": ">=22.21"
+  }
+}