3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-17 00:15:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Update react-email package (#1001)

Browse source
This commit is contained in:
Luke Vella 2024-01-28 16:19:36 +07:00 • committed by GitHub
parent 317244ef28
commit 7e213b0b4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 2493 additions and 1913 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/emails/src/send-email.tsx
View file

@ -7,7 +7,7 @@ import previewEmail from "preview-email";
import React from "react";
import * as templates from "./templates";
import { EmailContext } from "./templates/components/email-context";
import { EmailContext } from "./templates/_components/email-context";
type Templates = typeof templates;

11
packages/emails/src/templates/_components/email-context.tsx Normal file
View file

@ -0,0 +1,11 @@
export type EmailContext = {
logoUrl: string;
baseUrl: string;
domain: string;
};
export const defaultEmailContext = {
logoUrl: "https://rallly.co/logo.png",
baseUrl: "https://rallly.co",
domain: "rallly.co",
};

90
packages/emails/src/templates/_components/email-layout.tsx Normal file
View file

@ -0,0 +1,90 @@
import {
Body,
Container,
Head,
Html,
Img,
Link,
Preview,
Tailwind,
} from "@react-email/components";
import { EmailContext } from "./email-context";
import { Section, Text } from "./styled-components";
export interface EmailLayoutProps {
preview: string;
recipientName: string;
footNote?: React.ReactNode;
ctx: EmailContext;
}
const sectionStyles = {
marginTop: "16px",
marginBottom: "16px",
};
export const EmailLayout = ({
preview,
recipientName = "Guest",
children,
footNote,
ctx,
}: React.PropsWithChildren<EmailLayoutProps>) => {
const { logoUrl, baseUrl } = ctx;
return (
<Tailwind>
<Html>
<Head />
<Preview>{preview}</Preview>
<Body className="bg-gray-50 py-5">
<Container className="w-full rounded-md border border-solid border-gray-200 bg-white p-4">
<Img src={logoUrl} alt="Rallly" width={128} />
<Section style={sectionStyles}>
<Text>Hi {recipientName},</Text>
{children}
</Section>
{footNote ? (
<Section className="border-t border-solid border-gray-200">
<Text className="text-sm text-gray-500">{footNote}</Text>
</Section>
) : null}
<Section className="my-0 font-sans text-sm text-gray-500">
<Link className="text-gray-500" href={baseUrl}>
Home
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href="https://twitter.com/ralllyco"
>
Twitter
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href="https://github.com/lukevella/rallly"
>
Github
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
>
Donate
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
className="text-gray-500"
href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
>
Contact
</Link>
</Section>
</Container>
</Body>
</Html>
</Tailwind>
);
};

0
packages/emails/src/templates/components/notification-email.tsx → packages/emails/src/templates/_components/notification-email.tsx
View file

10
packages/emails/src/templates/components/styled-components.tsx → packages/emails/src/templates/_components/styled-components.tsx
View file

@ -1,6 +1,5 @@
import {
Button as UnstyledButton,
ButtonProps,
Heading as UnstyledHeading,
Link as UnstyledLink,
LinkProps,
@ -37,7 +36,7 @@ export const Domain = ({ ctx }: { ctx: EmailContext }) => {
return <Link href={baseUrl}>{domain}</Link>;
};
export const Button = (props: ButtonProps) => {
export const Button = (props: React.ComponentProps<typeof UnstyledButton>) => {
return (
<UnstyledButton
{...props}
@ -79,14 +78,9 @@ export const Heading = (
<UnstyledHeading
{...props}
as={as}
className="font-sans font-bold text-gray-900"
style={{
marginTop: "16px",
marginBottom: "8px",
letterSpacing: "-0.75px",
fontFamily: "sans-serif",
fontWeight: "bold",
fontSize: fontSize[as],
color: "#1E293B",
...props.style,
}}
/>

5
packages/emails/src/templates/components/email-context.tsx
View file

@ -1,5 +0,0 @@
export type EmailContext = {
logoUrl: string;
baseUrl: string;
domain: string;
};

104
packages/emails/src/templates/components/email-layout.tsx
View file

@ -1,104 +0,0 @@
import {
Body,
Container,
Head,
Html,
Img,
Link,
Preview,
} from "@react-email/components";
import { EmailContext } from "./email-context";
import { fontFamily, Section, Text } from "./styled-components";
export interface EmailLayoutProps {
preview: string;
recipientName: string;
footNote?: React.ReactNode;
ctx: EmailContext;
}
const containerStyles = {
maxWidth: "600px",
margin: "0 auto",
background: "white",
fontFamily,
padding: 16,
border: "1px solid #E2E8F0",
borderRadius: 5,
};
const sectionStyles = {
marginTop: "16px",
marginBottom: "16px",
};
const linkStyles = {
color: "#64748B",
marginRight: "8px",
};
export const EmailLayout = ({
preview,
recipientName = "Guest",
children,
footNote,
ctx,
}: React.PropsWithChildren<EmailLayoutProps>) => {
const { logoUrl, baseUrl } = ctx;
return (
<Html>
<Head />
<Preview>{preview}</Preview>
<Body style={{ backgroundColor: "#F3F4F6", padding: "16px" }}>
<Container style={containerStyles}>
<Img src={logoUrl} alt="Rallly" width={128} />
<Section style={sectionStyles}>
<Text>Hi {recipientName},</Text>
{children}
{footNote ? (
<Text
style={{
color: "#64748B",
fontFamily,
paddingTop: 16,
marginTop: 32,
borderTop: "1px solid #e2e8f0",
}}
>
{footNote}
</Text>
) : null}
</Section>
<Section style={{ ...sectionStyles, fontSize: 14, marginBottom: 0 }}>
<Link style={linkStyles} href={baseUrl}>
Home
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link style={linkStyles} href="https://twitter.com/ralllyco">
Twitter
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link style={linkStyles} href="https://github.com/lukevella/rallly">
Github
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
style={linkStyles}
href="https://www.paypal.com/donate/?hosted_button_id=7QXP2CUBLY88E"
>
Donate
</Link>
<span>&nbsp;&bull;&nbsp;</span>
<Link
style={linkStyles}
href={`mailto:${process.env["SUPPORT_EMAIL"]}`}
>
Contact
</Link>
</Section>
</Container>
</Body>
</Html>
);
};

8
packages/emails/src/templates/finalized-host.tsx
View file

@ -1,8 +1,8 @@
import { Column, Row, Section } from "@react-email/components";
import { EmailContext } from "./components/email-context";
import { EmailLayout } from "./components/email-layout";
import { borderColor, Button, Text } from "./components/styled-components";
import { defaultEmailContext, EmailContext } from "./_components/email-context";
import { EmailLayout } from "./_components/email-layout";
import { borderColor, Button, Text } from "./_components/styled-components";
export interface FinalizeHostEmailProps {
date: string;
@ -25,7 +25,7 @@ export const FinalizeHostEmail = ({
dow = "Fri",
date = "Friday, 12th June 2020",
time = "6:00 PM to 11:00 PM BST",
ctx,
ctx = defaultEmailContext,
}: FinalizeHostEmailProps) => {
return (
<EmailLayout ctx={ctx} recipientName={name} preview="Final date booked!">

8
packages/emails/src/templates/finalized-participant.tsx
View file

@ -1,8 +1,8 @@
import { Column, Row, Section } from "@react-email/components";
import { EmailContext } from "./components/email-context";
import { EmailLayout } from "./components/email-layout";
import { borderColor, Button, Text } from "./components/styled-components";
import { defaultEmailContext, EmailContext } from "./_components/email-context";
import { EmailLayout } from "./_components/email-layout";
import { borderColor, Button, Text } from "./_components/styled-components";
export interface FinalizeParticipantEmailProps {
date: string;
@ -27,7 +27,7 @@ export const FinalizeParticipantEmail = ({
dow = "Fri",
date = "Friday, 12th June 2020",
time = "6:00 PM to 11:00 PM BST",
ctx,
ctx = defaultEmailContext,
}: FinalizeParticipantEmailProps) => {
return (
<EmailLayout ctx={ctx} recipientName={name} preview="Final date booked!">

8
packages/emails/src/templates/login.tsx
View file

@ -1,5 +1,5 @@
import { EmailContext } from "./components/email-context";
import { EmailLayout } from "./components/email-layout";
import { defaultEmailContext, EmailContext } from "./_components/email-context";
import { EmailLayout } from "./_components/email-layout";
import {
Button,
Card,
@ -7,7 +7,7 @@ import {
Heading,
Text,
trackingWide,
} from "./components/styled-components";
} from "./_components/styled-components";
interface LoginEmailProps {
name: string;
@ -20,7 +20,7 @@ export const LoginEmail = ({
name = "Guest",
code = "123456",
magicLink = "https://rallly.co",
ctx,
ctx = defaultEmailContext,
}: LoginEmailProps) => {
return (
<EmailLayout

7
packages/emails/src/templates/new-comment.tsx
View file

@ -1,7 +1,8 @@
import { defaultEmailContext } from "./_components/email-context";
import NotificationEmail, {
NotificationBaseProps,
} from "./components/notification-email";
import { Text } from "./components/styled-components";
} from "./_components/notification-email";
import { Text } from "./_components/styled-components";
export interface NewCommentEmailProps extends NotificationBaseProps {
authorName: string;
@ -13,7 +14,7 @@ export const NewCommentEmail = ({
authorName = "Someone",
pollUrl = "https://rallly.co",
disableNotificationsUrl = "https://rallly.co",
ctx,
ctx = defaultEmailContext,
}: NewCommentEmailProps) => {
return (
<NotificationEmail

8
packages/emails/src/templates/new-participant-confirmation.tsx
View file

@ -1,6 +1,6 @@
import { EmailContext } from "./components/email-context";
import { EmailLayout } from "./components/email-layout";
import { Button, Domain, Section, Text } from "./components/styled-components";
import { defaultEmailContext, EmailContext } from "./_components/email-context";
import { EmailLayout } from "./_components/email-layout";
import { Button, Domain, Section, Text } from "./_components/styled-components";
interface NewParticipantConfirmationEmailProps {
name: string;
@ -12,7 +12,7 @@ export const NewParticipantConfirmationEmail = ({
title = "Untitled Poll",
name = "John",
editSubmissionUrl = "https://rallly.co",
ctx,
ctx = defaultEmailContext,
}: NewParticipantConfirmationEmailProps) => {
const { domain } = ctx;
return (

7
packages/emails/src/templates/new-participant.tsx
View file

@ -1,7 +1,8 @@
import { defaultEmailContext } from "./_components/email-context";
import NotificationEmail, {
NotificationBaseProps,
} from "./components/notification-email";
import { Text } from "./components/styled-components";
} from "./_components/notification-email";
import { Text } from "./_components/styled-components";
export interface NewParticipantEmailProps extends NotificationBaseProps {
participantName: string;
@ -13,7 +14,7 @@ export const NewParticipantEmail = ({
participantName = "Someone",
pollUrl = "https://rallly.co",
disableNotificationsUrl = "https://rallly.co",
ctx,
ctx = defaultEmailContext,
}: NewParticipantEmailProps) => {
return (
<NotificationEmail

8
packages/emails/src/templates/new-poll.tsx
View file

@ -1,6 +1,6 @@
import { EmailContext } from "./components/email-context";
import { EmailLayout } from "./components/email-layout";
import { Button, Card, Link, Text } from "./components/styled-components";
import { defaultEmailContext, EmailContext } from "./_components/email-context";
import { EmailLayout } from "./_components/email-layout";
import { Button, Card, Link, Text } from "./_components/styled-components";
export interface NewPollEmailProps {
title: string;
@ -38,7 +38,7 @@ export const NewPollEmail = ({
name = "John",
adminLink = "https://rallly.co/admin/abcdefg123",
participantLink = "https://rallly.co/invite/wxyz9876",
ctx,
ctx = defaultEmailContext,
}: NewPollEmailProps) => {
const { baseUrl, domain } = ctx;
return (

8
packages/emails/src/templates/register.tsx
View file

@ -1,11 +1,11 @@
import { EmailContext } from "./components/email-context";
import { EmailLayout } from "./components/email-layout";
import { defaultEmailContext, EmailContext } from "./_components/email-context";
import { EmailLayout } from "./_components/email-layout";
import {
Domain,
Heading,
Text,
trackingWide,
} from "./components/styled-components";
} from "./_components/styled-components";
interface RegisterEmailProps {
name: string;
@ -16,7 +16,7 @@ interface RegisterEmailProps {
export const RegisterEmail = ({
name = "John",
code = "123456",
ctx,
ctx = defaultEmailContext,
}: RegisterEmailProps) => {
return (
<EmailLayout

BIN
packages/emails/src/templates/static/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB