@developh/emails

Emails transacionais como documento: cartão branco, réguas de 1px, título em serif, selo Developh no rodapé. Um layout, uma paleta por cliente.

bun add @developh/emails @react-email/components

Layout e peças

import { criarEmail, formatarDataExtenso, type Marca } from "@developh/emails";

const MARCA: Marca = {
  nome: "Portofino",
  logo: { src: "https://www.portofino.pt/images/email/logo-portofino.png", width: 150, height: 27, alt: "Portofino" },
  siteUrl: "https://www.portofino.pt",
  linhas: ["Restaurante & Bar de Praia", "Avenida dos Náufragos, Praia do Ouro", "2970-000 Sesimbra, Portugal"],
  contactos: [
    { rotulo: "+351 919 480 286", href: "tel:+351919480286" },
    { rotulo: "[email protected]", href: "mailto:[email protected]" },
  ],
  legal: "Email automático do sistema de reservas.",
  paleta: { ink: "#3d2b22", cocoa: "#5f4435", sand: "#8d7a6d", sandLight: "#a2958a", rule: "#e8ded4", ruleSoft: "#f0e9e1", shell: "#efe9e2", paper: "#ffffff", paperSoft: "#faf7f2" },
};

// Peças já ligadas à paleta da marca. Sem React context: os emails renderizam
// em server actions, onde o React de servidor não tem createContext.
export const { EmailLayout, Titulo, Paragrafo, Detalhes, BotaoPrimario, Codigo } = criarEmail(MARCA);

export default function Confirmacao({ codigo, data, hora, pessoas }) {
  return (
    <EmailLayout previewText="Reserva confirmada" eyebrow="Reserva confirmada"
      hero={{ src: "https://www.portofino.pt/images/carta/mesa-vista.jpg", alt: "Mesa com vista" }}>
      <Titulo>Até já.</Titulo>
      <Paragrafo>A sua mesa está confirmada.</Paragrafo>
      <Detalhes larguraRotulo={100} linhas={[
        { rotulo: "Data", valor: formatarDataExtenso(data) },
        { rotulo: "Hora", valor: hora },
        { rotulo: "Código", valor: <Codigo>{codigo}</Codigo> },
      ]} />
      <BotaoPrimario href="https://maps.google.com/?q=Portofino+Sesimbra">Ver como chegar →</BotaoPrimario>
    </EmailLayout>
  );
}

Regras que o layout já cumpre: imagens em URL absoluta de produção, lang="pt", color-scheme: light, largura 600, tabelas com role="presentation", responsivo abaixo de 620px, selo Developh de 68px com alt legível.

Coleção de templates

templates/ traz a coleção oficial da React Email (MIT, Plus Five Five, Inc.) para servir de base quando um cliente pede algo fora do layout da casa:

| Família | Estilo | |---|---| | 01-Barebone | Só tipografia, zero cromo | | 02-Matte | Cartão suave, verde profundo, Inter | | 03-Protocol | Técnico, mono | | 04-Arcane | Escuro, editorial | | 05-Studio | Comércio, Geist, order/shipping | | Community | Contribuições: Stripe, Vercel, Linear, Airbnb, Notion, etc. |

Pré-visualizar no monorepo com bun run emails. As imagens de exemplo (templates/static, 62 MB) ficam no repo e fora do pacote npm; os templates referem-nas por ${baseUrl}/static/..., troca-se pelo CDN do cliente.