separate email package

apps/web/app.config.ts

@@ -16,7 +16,11 @@ export default defineConfig({
 	// @ts-expect-error: SS's types are wrong. This is piped into Solid's Vite plugin so all options are not required.
 	solid: {
 		// We don't wanna apply Solid's JSX transform to the React emails.
-		exclude: ["src/emails/*", "src/components/OTPInput/react.tsx"],
+		exclude: [
+			"src/emails/*",
+			"src/components/OTPInput/react.tsx",
+			"../../packages/email/**",
+		],
 	},
 	vite: ({ router }) => ({
 		envDir: monorepoRoot,
@@ -27,7 +31,7 @@ export default defineConfig({
 		},
 		build: {
 			// Safari mobile has problems with newer syntax
-			target: "es2015",
+			target: "es2020",
 		},
 		plugins: [
 			devtools(),
@@ -52,6 +56,9 @@ export default defineConfig({
 		rollupConfig: {
 			external: ["cloudflare:sockets"],
 		},
+		esbuild: {
+			options: { target: "es2020" },
+		},
 	},
 });
 

apps/web/package.json

@@ -20,6 +20,7 @@
 		"@lucia-auth/adapter-drizzle": "^1.0.7",
 		"@mattrax/configuration-schemas": "workspace:*",
 		"@mattrax/drizzle-to-rs": "workspace:*",
+		"@mattrax/email": "workspace:*",
 		"@mattrax/ms-graph": "workspace:*",
 		"@mattrax/mysql-planetscale": "workspace:*",
 		"@mattrax/policy-composer": "workspace:*",
@@ -28,9 +29,6 @@
 		"@microsoft/microsoft-graph-client": "^3.0.7",
 		"@paralleldrive/cuid2": "^2.2.2",
 		"@planetscale/database": "^1.16.0",
-		"@react-email/components": "0.0.16",
-		"@react-email/render": "^0.0.12",
-		"@react-email/tailwind": "^0.0.15",
 		"@solid-mediakit/trpc": "^3.0.2",
 		"@solid-primitives/context": "^0.2.3",
 		"@solid-primitives/date": "^2.0.21",

apps/web/src/api/emails.ts

@@ -1,38 +1,32 @@
-import { z } from "zod";
+import { type RequestSchema } from "@mattrax/email";
+import { AwsClient } from "aws4fetch";
 import { env } from "~/env";
 
-const REQUEST_SCHEMA = z
-	.object({
-		to: z.string(),
-		subject: z.string(),
-	})
-	.and(
-		z.union([
-			z.object({
-				type: z.literal("tenantAdminInvite"),
-				invitedByEmail: z.string(),
-				tenantName: z.string(),
-				inviteLink: z.string(),
-			}),
-			z.object({
-				type: z.literal("loginCode"),
-				code: z.string(),
-			}),
-			z.object({
-				type: z.literal("userEnrollmentInvite"),
-				tenantName: z.string(),
-			}),
-		]),
-	);
-
-export type RequestSchema = z.infer<typeof REQUEST_SCHEMA>;
+const aws =
+	env.AWS_ACCESS_KEY_ID && env.AWS_SECRET_ACCESS_KEY
+		? new AwsClient({
+				region: "us-east-1",
+				accessKeyId: env.AWS_ACCESS_KEY_ID,
+				secretAccessKey: env.AWS_SECRET_ACCESS_KEY,
+			})
+		: undefined;
 
 export async function sendEmail(args: RequestSchema) {
 	if (env.FROM_ADDRESS === "console") {
 		console.log("SEND EMAIL", args);
 		return;
 	}
 
+	if (!aws) {
+		const msg = "AWS client not setup but 'FROM_ADDRESS' provided!";
+		console.error(msg);
+		throw new Error(msg);
+	}
+
 	// We lazy load to keep React + React email outta the main bundle
-	await (await import("../emails/index").then((mod) => mod._sender))(args);
+	await (await import("@mattrax/email").then((mod) => mod._sender))(
+		args,
+		aws,
+		env.FROM_ADDRESS,
+	);
 }

apps/web/src/api/trpc/routers/policy.ts

@@ -76,7 +76,7 @@ export const policyRouter = createTRPCRouter({
 
 			return {
 				// The differences between the policies state and the last deployed version
-				diff: generatePolicyDiff(lastVersion?.data ?? {}, policy.data),
+				diff: generatePolicyDiff(lastVersion?.data ?? ({} as any), policy.data),
 				...omit(policy, ["tenantPk"]),
 			};
 		}),
@@ -244,8 +244,8 @@ export const policyRouter = createTRPCRouter({
 				.limit(1);
 
 			if (
-				generatePolicyDiff(lastVersion?.data ?? {}, ctx.policy.data).length ===
-				0
+				generatePolicyDiff(lastVersion?.data ?? ({} as any), ctx.policy.data)
+					.length === 0
 			)
 				throw new Error("policy has not changed");
 

apps/web/src/app/(dash)/o.[orgSlug]/t.[tenantSlug]/apps/index.tsx

@@ -177,14 +177,12 @@ function CreateApplicationSheet(props: ParentProps) {
 
 	const [search, setSearch] = createSignal("");
 
-	const query = createQuery(
-		queryOptions(() => ({
-			...APPLICATION_TARGETS[form.getFieldValue("targetType")].queryOptions(
-				search,
-			),
-			enabled: open(),
-		})),
-	);
+	const query = createQuery(() => ({
+		...APPLICATION_TARGETS[form.getFieldValue("targetType")].queryOptions(
+			search,
+		),
+		enabled: open(),
+	}));
 
 	createEffect(() => {
 		const results = query.data?.results;

apps/web/src/app/api/cli/policy/[policyId].ts

@@ -8,19 +8,19 @@ import { generatePolicyDiff } from "~/api/trpc/routers/policy";
 export async function GET({ params }: APIEvent) {
 	throw new Error("THE CLI IS NOT SUPPORTED YET");
 
-	const policyId = params.policyId as string;
+	// const policyId = params.policyId as string;
 
-	// TODO: Auth and Authz
+	// // TODO: Auth and Authz
 
-	const [policy] = await db
-		.select({
-			name: policies.name,
-			data: policies.data,
-		})
-		.from(policies)
-		.where(eq(policies.id, policyId));
+	// const [policy] = await db
+	//   .select({
+	//     name: policies.name,
+	//     data: policies.data,
+	//   })
+	//   .from(policies)
+	//   .where(eq(policies.id, policyId));
 
-	return policy;
+	// return policy;
 }
 
 const schema = z.object({
@@ -35,67 +35,70 @@ const schema = z.object({
 export async function POST({ request, params }: APIEvent) {
 	throw new Error("THE CLI IS NOT SUPPORTED YET");
 
-	const policyId = params.policyId as string;
-	const body = schema.safeParse(await request.json());
-
-	if (!body.success)
-		return new Response("Error parsing request!", {
-			status: 400,
-		});
-
-	const [policy] = await db
-		.select({
-			pk: policies.pk,
-			tenantPk: policies.tenantPk,
-			data: policies.data,
-		})
-		.from(policies)
-		.where(eq(policies.id, policyId));
-	if (!policy)
-		return new Response("404: Policy not found", {
-			status: 404,
-		});
-
-	// TODO: Auth and Authz
-	const authorId = 2;
-
-	const [lastVersion] = await db
-		.select({ data: policyDeploy.data })
-		.from(policyDeploy)
-		.where(and(eq(policyDeploy.policyPk, policy.pk)))
-		.orderBy(desc(policyDeploy.doneAt))
-		.limit(1);
-
-	if (generatePolicyDiff(lastVersion?.data ?? {}, body.data.data).length === 0)
-		return Response.json(["unchanged", null]);
-
-	const updatePolicy = () =>
-		db
-			.update(policies)
-			.set({
-				name: body.data.name,
-				data: body.data.data,
-			})
-			.where(eq(policies.id, policyId));
-
-	if (body.data.comment) {
-		const comment = body.data.comment;
-
-		const versionId = createId();
-		await db.transaction(async (db) => {
-			await updatePolicy();
-			await db.insert(policyDeploy).values({
-				id: versionId,
-				policyPk: policy.pk,
-				data: body.data.data,
-				comment,
-				author: authorId,
-			});
-		});
-
-		return Response.json(["deployed", versionId]);
-	}
-
-	await updatePolicy();
-	return Response.json(["updated", null]);
+	// const policyId = params.policyId as string;
+	// const body = schema.safeParse(await request.json());
+
+	// if (!body.success)
+	//   return new Response("Error parsing request!", {
+	//     status: 400,
+	//   });
+
+	// const [policy] = await db
+	//   .select({
+	//     pk: policies.pk,
+	//     tenantPk: policies.tenantPk,
+	//     data: policies.data,
+	//   })
+	//   .from(policies)
+	//   .where(eq(policies.id, policyId));
+	// if (!policy)
+	//   return new Response("404: Policy not found", {
+	//     status: 404,
+	//   });
+
+	// // TODO: Auth and Authz
+	// const authorId = 2;
+
+	// const [lastVersion] = await db
+	//   .select({ data: policyDeploy.data })
+	//   .from(policyDeploy)
+	//   .where(and(eq(policyDeploy.policyPk, policy.pk)))
+	//   .orderBy(desc(policyDeploy.doneAt))
+	//   .limit(1);
+
+	// if (
+	//   generatePolicyDiff(lastVersion?.data ?? ({} as any), body.data.data)
+	//     .length === 0
+	// )
+	//   return Response.json(["unchanged", null]);
+
+	// const updatePolicy = () =>
+	//   db
+	//     .update(policies)
+	//     .set({
+	//       name: body.data.name,
+	//       data: body.data.data,
+	//     })
+	//     .where(eq(policies.id, policyId));
+
+	// if (body.data.comment) {
+	//   const comment = body.data.comment;
+
+	//   const versionId = createId();
+	//   await db.transaction(async (db) => {
+	//     await updatePolicy();
+	//     await db.insert(policyDeploy).values({
+	//       id: versionId,
+	//       policyPk: policy.pk,
+	//       data: body.data.data,
+	//       comment,
+	//       author: authorId,
+	//     });
+	//   });
+
+	//   return Response.json(["deployed", versionId]);
+	// }
+
+	// await updatePolicy();
+	// return Response.json(["updated", null]);
 }

apps/web/src/lib/featureFlags.ts

@@ -2,7 +2,7 @@ import { getObjectKeys } from "~/api/utils";
 import { trpc } from ".";
 
 export const features = {
-	// visual_editor: "Policy Visual Editor",
+	visual_editor: "Policy Visual Editor",
 } as const;
 
 export type Features = keyof typeof features;

apps/web/tsconfig.json

@@ -18,6 +18,7 @@
 	"exclude": ["node_modules", "dist"],
 	"references": [
 		{ "path": "../../packages/ui" },
+		{ "path": "../../packages/email" },
 		{ "path": "../../packages/trpc-server-function" }
 	]
 }

packages/email/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "@mattrax/email",
+	"type": "module",
+	"private": true,
+	"sideEffects": false,
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"dependencies": {
+		"@react-email/components": "0.0.16",
+		"@react-email/render": "^0.0.12",
+		"@react-email/tailwind": "^0.0.15",
+		"aws4fetch": "^1.0.18",
+		"react": "^18.2.0",
+		"zod": "^3.22.5"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.79"
+	}
+}

apps/web/src/emails/LoginCode.email.tsx → packages/email/src/LoginCode.tsx

@@ -1,5 +1,4 @@
-// @ts-nocheck // TODO: Typescript
-/** @jsx React.createElement */
+// @jsxImportSource react
 
 // biome-ignore lint: don't remove React
 import React from "react";

apps/web/src/emails/TenantAdminInvite.email.tsx → packages/email/src/TenantAdminInvite.tsx

@@ -1,5 +1,4 @@
-// @ts-nocheck // TODO: Typescript
-/** @jsx React.createElement */
+// @jsxImportSource react
 
 // biome-ignore lint: don't remove React
 import React from "react";
@@ -23,7 +22,7 @@ interface Props {
 	inviteLink: string;
 }
 
-export function TenantAdminInvite(props: Props) {
+function TenantAdminInvite(props: Props) {
 	const previewText = `Join ${props.tenantName} on Mattrax`;
 
 	return (