email integration

* Nest email module with smtp, postmark and console log drivers
* react-email package
This commit is contained in:
Philipinho
2024-05-02 03:12:40 +01:00
parent 48be0c21ae
commit 4c573b9bc2
26 changed files with 2685 additions and 446 deletions

16
packages/transactional/.gitignore vendored Normal file
View File

@ -0,0 +1,16 @@
.env
# compiled output
/dist
/node_modules
# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# OS
.DS_Store

View File

@ -0,0 +1,53 @@
export const fontFamily = "HelveticaNeue,Helvetica,Arial,sans-serif";
export const main = {
backgroundColor: "#edf2f7",
fontFamily,
};
export const container = {
maxWidth: "580px",
margin: "30px auto",
backgroundColor: "#ffffff",
borderColor: "#e8e5ef",
borderRadius: "2px",
borderWidth: "1px",
boxShadow: "0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015)",
};
export const content = {
padding: "5px 20px 10px 20px",
};
export const paragraph = {
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
color: "#333",
lineHeight: 1.5,
fontSize: 14,
};
export const h1 = {
color: "#333",
fontFamily:
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
fontSize: "24px",
fontWeight: "bold",
padding: "0",
};
export const logo = {
display: "flex",
justifyContent: "center",
alingItems: "center",
padding: 4,
};
export const link = {
textDecoration: "underline",
};
export const footer = {
maxWidth: "580px",
margin: "0 auto",
};

View File

@ -0,0 +1,26 @@
import { Container, Section, Text } from "@react-email/components";
import * as React from "react";
import { container, content, paragraph } from "../css/styles";
import { MailBody, MailFooter } from "../partials/partials";
interface WelcomeEmailProps {
username?: string;
}
export const TestEmail = ({ username }: WelcomeEmailProps) => {
return (
<MailBody>
<Container style={container}>
<Section style={content}>
<Text style={paragraph}>Hi {username},</Text>
<Text style={paragraph}>
This is a test email. Make sure to read it.
</Text>
</Section>
</Container>
<MailFooter />
</MailBody>
);
};
export default TestEmail;

View File

@ -0,0 +1,10 @@
{
"name": "@docmost/transactional",
"scripts": {
"dev": "email dev -p 5019"
},
"dependencies": {
"@react-email/components": "0.0.17",
"react-email": "^2.1.2"
}
}

View File

@ -0,0 +1,43 @@
import { footer, h1, logo, main } from "../css/styles";
import {
Body,
Head,
Heading,
Html,
Row,
Section,
Text,
} from "@react-email/components";
import * as React from "react";
interface MailBodyProps {
children: React.ReactNode;
}
export function MailBody({ children }: MailBodyProps) {
return (
<Html>
<Head />
<Body style={main}>{children}</Body>
</Html>
);
}
export function MailHeader() {
return (
<Section style={logo}>
<Heading style={h1}>logo/text</Heading>
</Section>
);
}
export function MailFooter() {
return (
<Section style={footer}>
<Row>
<Text style={{ textAlign: "center", color: "#706a7b" }}>
© {new Date().getFullYear()}, All Rights Reserved <br />
</Text>
</Row>
</Section>
);
}

View File

@ -0,0 +1,6 @@
export const formatDate = (date: Date) => {
new Intl.DateTimeFormat("en", {
dateStyle: "medium",
timeStyle: "medium",
}).format(date);
};