React Email to our boilerplate

Light-it-labs · Sep 26, 2024 · 1dbb752 · 1dbb752
1 parent 8f9dce9
commit 1dbb752
Show file tree

Hide file tree

Showing 7 changed files with 5,304 additions and 8,731 deletions.
diff --git a/.gitignore b/.gitignore
@@ -24,6 +24,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+emails/exported-emails
 
 # Sentry Config File
 .env.sentry-build-plugin

diff --git a/emails/_components/base.tsx b/emails/_components/base.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  Body,
+  Container,
+  Head,
+  Html,
+  Preview,
+  Tailwind,
+} from "@react-email/components";
+
+type BaseEmailTemplateProps = {
+  preview: string;
+} & React.PropsWithChildren;
+
+export const BaseEmailTemplate = ({
+  preview,
+  children,
+}: BaseEmailTemplateProps) => {
+  return (
+    <Html>
+      <Head></Head>
+      <Tailwind>
+        <Preview>{preview}</Preview>
+        <Body className='mx-auto my-auto bg-gray-400 p-10 px-2 font-sans'>
+          <Container className='mx-auto max-w-[340px] rounded-[20px] border border-solid border-gray-600 bg-white p-6'>
+            {children}
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
diff --git a/emails/_components/index.ts b/emails/_components/index.ts
@@ -0,0 +1,2 @@
+export * from "./base";
+export * from "./text";
diff --git a/emails/_components/text.tsx b/emails/_components/text.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Text as ReactEmailText } from "@react-email/components";
+import { tv, VariantProps } from "tailwind-variants";
+
+const emailText = tv({
+  base: "m-0 leading-tight tracking-[.5%]",
+  variants: {
+    variant: {
+      base: "text-black",
+      error: "text-red-500",
+      info: "text-blue-500",
+      success: "text-green-500",
+    },
+    size: {
+      default: "text-base",
+      small: "text-sm",
+      title: "text-2xl",
+    },
+  },
+  defaultVariants: {
+    variant: "base",
+    size: "default",
+  },
+});
+
+type Props = {
+  className?: string;
+} & React.PropsWithChildren &
+  VariantProps<typeof emailText>;
+
+export const EmailText = ({ variant, size, className, children }: Props) => {
+  return (
+    <ReactEmailText className={emailText({ variant, size, className })}>
+      {children}
+    </ReactEmailText>
+  );
+};
diff --git a/emails/example.tsx b/emails/example.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { BaseEmailTemplate, EmailText } from "./_components";
+
+export default function ExampleEmail() {
+  return (
+    <BaseEmailTemplate preview='This is an example email'>
+      <EmailText size='title'>Example Email</EmailText>
+      <EmailText className='my-4'>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus
+        corrupti incidunt eius deserunt ullam? Rem laborum beatae porro earum
+        suscipit doloremque obcaecati maxime atque fugiat placeat itaque magni,
+        aut veritatis consequatur eum, voluptates quas quod ipsam temporibus
+        numquam nam quam.
+      </EmailText>
+      <EmailText>
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus
+        corrupti incidunt eius deserunt ullam? Rem laborum beatae porro earum
+        suscipit doloremque obcaecati maxime atque fugiat placeat itaque magni,
+        aut veritatis consequatur eum, voluptates quas quod ipsam temporibus
+        numquam nam quam.
+      </EmailText>
+    </BaseEmailTemplate>
+  );
+}
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
     "clean": "git clean -xdf dist node_modules",
     "dev": "pnpm with-env vite",
     "preview": "pnpm with-env vite preview",
+    "email": "email dev",
+    "email:export": "email export --outDir './emails/exported-emails'",
     "storybook": "storybook dev -p 6969",
     "build-storybook": "storybook build",
     "lint": "eslint .",
@@ -57,6 +59,7 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.11.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
+    "@react-email/components": "0.0.25",
     "@sentry/types": "^8.30.0",
     "@storybook/addon-a11y": "^7.6.17",
     "@storybook/addon-actions": "^7.6.17",
@@ -99,6 +102,7 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "pretty-quick": "^4.0.0",
+    "react-email": "3.0.1",
     "storybook": "^7.6.17",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.2",
@@ -118,4 +122,4 @@
       "pretty-quick --staged"
     ]
   }
-}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from "./base";
		export * from "./text";