@jl0810/email-templates 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@jl0810/email-templates",
+  "version": "1.0.0",
+  "description": "Shared email templates for all RayDoug apps",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "email dev --port 3333",
+    "preview": "email preview",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./templates/*": {
+      "import": "./dist/templates/*.js",
+      "types": "./dist/templates/*.d.ts"
+    }
+  },
+  "dependencies": {
+    "@react-email/components": "^0.0.31",
+    "react": ">=18.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react-email": "^3.0.7",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  }
+}

package/src/branding.ts

@@ -0,0 +1,65 @@
+/**
+ * Branding configuration for email templates
+ * Each app can provide its own branding
+ */
+export interface AppBranding {
+    /** App name (e.g., "CardsGoneCrazy", "RetirementPlanner", "FakeSharp") */
+    appName: string;
+
+    /** Logo URL (absolute URL) */
+    logoUrl: string;
+
+    /** Primary brand color (hex, e.g., "#7C3AED") */
+    primaryColor: string;
+
+    /** Secondary/accent color (hex) */
+    accentColor?: string;
+
+    /** Support email address */
+    supportEmail: string;
+
+    /** App website URL */
+    websiteUrl: string;
+
+    /** Footer text */
+    footerText?: string;
+
+    /** CSS Gradient for the logo icon (e.g., "linear-gradient(to bottom right, #06B5D4, #3B82F6)") */
+    logoGradient?: string;
+}
+
+/**
+ * Pre-configured branding for RayDoug apps
+ */
+export const APP_BRANDING: Record<string, AppBranding> = {
+    cards: {
+        appName: "CardsGoneCrazy",
+        logoUrl: "",
+        primaryColor: "#06B5D4", // Cyan-500
+        accentColor: "#3B82F6", // Blue-500
+        logoGradient: "linear-gradient(135deg, #06B5D4 0%, #2563EB 100%)", // Cyan-500 to Blue-600
+        supportEmail: "support@cardsgonecrazy.com",
+        websiteUrl: "https://cardsgonecrazy.com",
+        footerText: "© CardsGoneCrazy. All rights reserved.",
+    },
+    retirement: {
+        appName: "RouteMyRetirement",
+        logoUrl: "",
+        primaryColor: "#2563EB", // Blue-600
+        accentColor: "#6366F1", // Indigo-500
+        logoGradient: "linear-gradient(135deg, #2563EB 0%, #4F46E5 100%)", // Blue-600 to Indigo-600
+        supportEmail: "support@routemyretirement.com",
+        websiteUrl: "https://routemyretirement.com",
+        footerText: "© RouteMyRetirement. All rights reserved.",
+    },
+    fakesharp: {
+        appName: "FakeSharp",
+        logoUrl: "",
+        primaryColor: "#10B981", // Emerald-500
+        accentColor: "#3B82F6", // Blue-500 for the logo gradient
+        logoGradient: "linear-gradient(135deg, #10B981 0%, #3B82F6 100%)", // Emerald-500 to Blue-500
+        supportEmail: "support@fakesharp.com",
+        websiteUrl: "https://fakesharp.com",
+        footerText: "© FakeSharp. All rights reserved.",
+    },
+};

package/src/index.ts

@@ -0,0 +1,164 @@
+import { render } from "@react-email/components";
+import * as React from "react";
+
+// Export branding
+export * from "./branding";
+
+// Export templates
+export { MagicLinkEmail } from "./templates/magic-link";
+export { WelcomeEmail } from "./templates/welcome";
+export { PasswordResetEmail } from "./templates/password-reset";
+
+// Re-export render for convenience
+export { render };
+
+// Import templates for the helper functions
+import { MagicLinkEmail } from "./templates/magic-link";
+import { WelcomeEmail } from "./templates/welcome";
+import { PasswordResetEmail } from "./templates/password-reset";
+import type { AppBranding } from "./branding";
+import { APP_BRANDING } from "./branding";
+
+/**
+ * Helper to get branding by app key
+ */
+export function getBranding(appKey: "cards" | "retirement" | "fakesharp"): AppBranding {
+    return APP_BRANDING[appKey];
+}
+
+/**
+ * Render magic link email to HTML
+ */
+export async function renderMagicLinkEmail(options: {
+    magicLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+}): Promise<string> {
+    return render(
+        React.createElement(MagicLinkEmail, {
+            magicLink: options.magicLink,
+            branding: options.branding,
+            userEmail: options.userEmail,
+        })
+    );
+}
+
+/**
+ * Render welcome email to HTML
+ */
+export async function renderWelcomeEmail(options: {
+    branding: AppBranding;
+    userName?: string;
+    dashboardUrl?: string;
+}): Promise<string> {
+    return render(
+        React.createElement(WelcomeEmail, {
+            branding: options.branding,
+            userName: options.userName,
+            dashboardUrl: options.dashboardUrl,
+        })
+    );
+}
+
+/**
+ * Render password reset email to HTML
+ */
+export async function renderPasswordResetEmail(options: {
+    resetLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+    expiresIn?: string;
+}): Promise<string> {
+    return render(
+        React.createElement(PasswordResetEmail, {
+            resetLink: options.resetLink,
+            branding: options.branding,
+            userEmail: options.userEmail,
+            expiresIn: options.expiresIn,
+        })
+    );
+}
+
+/**
+ * useSend API helper - sends email via useSend
+ */
+export async function sendEmail(options: {
+    to: string;
+    from: string;
+    subject: string;
+    html: string;
+    apiKey: string;
+    apiUrl?: string;
+}): Promise<{ emailId: string }> {
+    const baseUrl = options.apiUrl || "https://mail.raydoug.com/api/v1";
+
+    const response = await fetch(`${baseUrl}/emails`, {
+        method: "POST",
+        headers: {
+            Authorization: `Bearer ${options.apiKey}`,
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            to: options.to,
+            from: options.from,
+            subject: options.subject,
+            html: options.html,
+        }),
+    });
+
+    if (!response.ok) {
+        const error = await response.json().catch(() => ({}));
+        throw new Error(`Failed to send email: ${response.statusText} - ${JSON.stringify(error)}`);
+    }
+
+    return response.json();
+}
+
+/**
+ * High-level helper: Send magic link email
+ */
+export async function sendMagicLinkEmail(options: {
+    to: string;
+    magicLink: string;
+    branding: AppBranding;
+    apiKey: string;
+}): Promise<{ emailId: string }> {
+    const html = await renderMagicLinkEmail({
+        magicLink: options.magicLink,
+        branding: options.branding,
+        userEmail: options.to,
+    });
+
+    return sendEmail({
+        to: options.to,
+        from: options.branding.supportEmail.replace("support@", "noreply@"),
+        subject: `Sign in to ${options.branding.appName}`,
+        html,
+        apiKey: options.apiKey,
+    });
+}
+
+/**
+ * High-level helper: Send welcome email
+ */
+export async function sendWelcomeEmail(options: {
+    to: string;
+    userName?: string;
+    branding: AppBranding;
+    apiKey: string;
+    dashboardUrl?: string;
+}): Promise<{ emailId: string }> {
+    const html = await renderWelcomeEmail({
+        branding: options.branding,
+        userName: options.userName,
+        dashboardUrl: options.dashboardUrl,
+    });
+
+    return sendEmail({
+        to: options.to,
+        from: options.branding.supportEmail.replace("support@", "noreply@"),
+        subject: `Welcome to ${options.branding.appName}! 🎉`,
+        html,
+        apiKey: options.apiKey,
+    });
+}

package/src/templates/magic-link.tsx

@@ -0,0 +1,228 @@
+import {
+    Body,
+    Button,
+    Container,
+    Head,
+    Heading,
+    Html,
+    Img,
+    Link,
+    Preview,
+    Section,
+    Text,
+    Hr,
+} from "@react-email/components";
+import * as React from "react";
+import type { AppBranding } from "../branding";
+
+interface MagicLinkEmailProps {
+    magicLink: string;
+    branding: AppBranding;
+    userEmail?: string;
+}
+
+export const MagicLinkEmail = ({
+    magicLink,
+    branding,
+    userEmail,
+}: MagicLinkEmailProps) => {
+    const previewText = `Sign in to ${branding.appName}`;
+
+    return (
+        <Html>
+            <Head />
+            <Preview>{previewText}</Preview>
+            <Body style={main}>
+                <Container style={container}>
+                    {/* Gradient Header with Logo */}
+                    <Section style={{
+                        ...heroHeader,
+                        backgroundImage: branding.logoGradient,
+                        backgroundColor: branding.primaryColor,
+                    }}>
+                        <Heading style={brandHeading}>
+                            {branding.appName.includes("Cards") ? (
+                                <>
+                                    Cards<span style={{ fontWeight: 400 }}>Gone</span><span style={{ fontStyle: "italic" }}>Crazy</span>
+                                </>
+                            ) : branding.appName.includes("Retirement") ? (
+                                <>
+                                    Route<span style={{ opacity: 0.75 }}>My</span>Retirement
+                                </>
+                            ) : branding.appName.includes("Sharp") ? (
+                                <>
+                                    Fake<span style={{ fontWeight: 300 }}>Sharp</span>
+                                </>
+                            ) : (
+                                branding.appName
+                            )}
+                        </Heading>
+                    </Section>
+
+                    <Section style={contentContainer}>
+                        {/* Main Heading */}
+                        <Heading style={mainHeading}>Sign in to your account</Heading>
+
+                        {/* Description */}
+                        <Text style={paragraph}>
+                            We received a request to sign in to your account
+                            {userEmail ? <span style={{ color: "#334155", fontWeight: 600 }}> ({userEmail})</span> : ""}.
+                        </Text>
+                        <Text style={paragraph}>
+                            Click the button below to authenticate clearly and securely.
+                        </Text>
+
+                        {/* CTA Button */}
+                        <Section style={buttonContainer}>
+                            <Button
+                                style={{
+                                    ...button,
+                                    backgroundColor: branding.primaryColor,
+                                    boxShadow: `0 0 20px ${branding.primaryColor}40`, // 25% opacity glow
+                                }}
+                                href={magicLink}
+                            >
+                                Sign In
+                            </Button>
+                        </Section>
+
+                        {/* Fallback Link */}
+                        <Text style={paragraphSmall}>
+                            Or paste this link into your browser:
+                        </Text>
+                        <Text style={linkText}>{magicLink}</Text>
+
+                        <Hr style={divider} />
+
+                        {/* Footer */}
+                        <Text style={paragraphMuted}>
+                            If you didn't request this, you can safely ignore this email.
+                        </Text>
+
+                        <Section style={footer}>
+                            <Text style={footerText}>
+                                {branding.footerText || `© ${branding.appName}`}
+                            </Text>
+                            <Link href={branding.websiteUrl} style={footerLink}>
+                                {branding.websiteUrl.replace("https://", "")}
+                            </Link>
+                        </Section>
+                    </Section>
+                </Container>
+            </Body>
+        </Html>
+    );
+};
+
+// Styles
+const main = {
+    backgroundColor: "#f8fafc", // Slate-50
+    fontFamily:
+        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    padding: "40px 0",
+};
+
+const container = {
+    backgroundColor: "#ffffff", // White
+    margin: "0 auto",
+    padding: "0",
+    maxWidth: "520px",
+    borderRadius: "16px",
+    border: "1px solid #e2e8f0", // Slate-200
+    overflow: "hidden" as const,
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)", // Soft shadow
+};
+
+const heroHeader = {
+    padding: "48px 0",
+    textAlign: "center" as const,
+};
+
+const contentContainer = {
+    padding: "48px",
+};
+
+const brandHeading = {
+    margin: "0",
+    fontSize: "28px",
+    fontWeight: "800",
+    color: "#ffffff",
+    letterSpacing: "-0.5px",
+    textShadow: "0 2px 4px rgba(0,0,0,0.1)",
+};
+
+const mainHeading = {
+    color: "#0f172a", // Slate-900
+    fontSize: "30px",
+    fontWeight: "700",
+    margin: "0 0 24px",
+    letterSpacing: "-0.5px",
+    lineHeight: "38px",
+};
+
+const paragraph = {
+    color: "#334155", // Slate-700
+    fontSize: "16px",
+    lineHeight: "26px",
+    margin: "0 0 16px",
+};
+
+const buttonContainer = {
+    margin: "32px 0",
+};
+
+const button = {
+    color: "#ffffff",
+    fontSize: "15px",
+    fontWeight: "600",
+    textDecoration: "none",
+    textAlign: "center" as const,
+    display: "inline-block",
+    padding: "14px 32px",
+    borderRadius: "8px",
+};
+
+const paragraphSmall = {
+    color: "#64748b", // Slate-500
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0 0 8px",
+};
+
+const linkText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    lineHeight: "18px",
+    wordBreak: "break-all" as const,
+    margin: "0 0 24px",
+};
+
+const divider = {
+    borderColor: "#e2e8f0", // Slate-200
+    margin: "32px 0",
+};
+
+const paragraphMuted = {
+    color: "#94a3b8",
+    fontSize: "13px",
+    lineHeight: "20px",
+    margin: "0 0 24px",
+};
+
+const footer = {
+    textAlign: "center" as const,
+};
+
+const footerText = {
+    color: "#94a3b8", // Slate-400
+    fontSize: "12px",
+    margin: "0 0 8px",
+};
+
+const footerLink = {
+    color: "#64748b", // Slate-500
+    fontSize: "12px",
+    textDecoration: "underline",
+};
+
+export default MagicLinkEmail;