@la-batcave/emails

Package npm centralisant les templates email de La Batcave. Render des composants React Email en HTML string, provider-agnostic.

Installation

pnpm add @la-batcave/emails

Peer dependencies : react, react-dom (v18 ou v19).

Usage

import { renderMagicLink } from "@la-batcave/emails";

const html = await renderMagicLink({
  code: "482931",
  url: "https://auth.btcv.fr/verify?token=abc",
  serviceName: "La Batcave Auth",
});
// html est un string HTML prêt à envoyer via Resend, SMTP, Cloudflare, etc.

Templates disponibles

Magic Link

Fonction : renderMagicLink(props): Promise<string> Composant : MagicLinkEmail Type : MagicLinkProps

| Prop | Type | Description | |------|------|-------------| | code | string | Code OTP 6 chiffres | | url | string | Lien magique cliquable | | serviceName | string | Nom du service affiché dans le header |

Contenu : titre, code OTP en gros caractères, bouton CTA, mention d'expiration (15 min), footer disclaimer.

Architecture

src/
  components/
    layout.tsx      # Layout de base : fond sombre, header serviceName, footer
    button.tsx      # Bouton CTA (fond #eabd1a, texte #121212)
    footer.tsx      # Footer : disclaimer + copyright BTCV
  templates/
    magic-link.tsx  # Template magic link + renderMagicLink()
  index.ts          # Point d'entrée public

Chaque template :

• Exporte un composant React (pour le preview et l'usage avancé)
• Exporte un default export du composant (requis par le dev server React Email)
• Exporte une fonction render*() async qui retourne du HTML string via @react-email/render

Les composants partagés (Layout, Button, Footer) sont dans src/components/ et réutilisés par tous les templates.

Design

Dark theme. Palette :

| Token | Valeur | Usage | |-------|--------|-------| | primary | #eabd1a | Boutons, accents | | background | #121212 | Fond de l'email | | surface | #1e1e1e | Conteneur central | | text | #f0f0f0 | Texte principal | | textMuted | #a0a0a0 | Texte secondaire | | border | #2a2a2a | Séparateurs |

Ajouter un nouveau template

1. Creer src/templates/mon-template.tsx
2. Importer Layout, Button, Footer depuis ../components/
3. Exporter le composant React en named + default export
4. Exporter une fonction renderMonTemplate() async
5. Ré-exporter depuis src/index.ts
6. Ajouter des tests dans src/__tests__/

Scripts

| Commande | Description | |----------|-------------| | pnpm dev | Lance le preview React Email sur localhost:3000 | | pnpm build | Build avec tsup (ESM + CJS + types dans dist/) | | pnpm test | Lance les tests avec vitest |

Build

tsup produit :

• dist/index.mjs (ESM)
• dist/index.js (CJS)
• dist/index.d.ts (types)

Le package est configuré avec "type": "module" et des exports conditionnels dans package.json.