create-m5kdev 0.25.3 → 0.26.2

package/templates/minimal-app/apps/email/package.json.tpl

@@ -1,34 +1,34 @@
-{
-  "name": "{{PACKAGE_SCOPE}}/email",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "build": "tsc --noEmit",
-    "lint": "biome check .",
-    "lint:fix": "biome check . --write",
-    "check-types": "tsc --noEmit",
-    "email:dev": "react-email dev --dir src/emails"
-  },
-  "dependencies": {
-    "@m5kdev/commons": "catalog:",
-    "@m5kdev/email": "catalog:",
-    "@react-email/components": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:"
-  },
-  "devDependencies": {
-    "@m5kdev/backend": "catalog:",
-    "@m5kdev/config": "catalog:",
-    "@types/node": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "react-email": "catalog:",
-    "tslib": "catalog:",
-    "typescript": "catalog:"
-  },
-  "main": "./src/index.ts",
-  "exports": {
-    ".": "./src/index.ts",
-    "./resources": "./src/resources.ts"
-  }
-}
+{
+  "name": "{{PACKAGE_SCOPE}}/email",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "tsc --noEmit",
+    "lint": "biome check .",
+    "lint:fix": "biome check . --write",
+    "check-types": "tsc --noEmit",
+    "email:dev": "react-email dev --dir src/emails"
+  },
+  "dependencies": {
+    "@m5kdev/commons": "catalog:",
+    "@m5kdev/email": "catalog:",
+    "@react-email/components": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@m5kdev/backend": "catalog:",
+    "@m5kdev/config": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "react-email": "catalog:",
+    "tslib": "catalog:",
+    "typescript": "catalog:"
+  },
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./resources": "./src/resources.ts"
+  }
+}

package/templates/minimal-app/apps/email/src/emails/accountDeletionEmail.tsx.tpl

@@ -1,34 +1,35 @@
-import { Heading, Text } from "@react-email/components";
-import { CtaButton } from "@m5kdev/email/components/CtaButton";
-import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
-import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
-
-function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
-  return t ?? ((key: string) => key);
-}
-
-export default function AccountDeletionEmail({
-  previewText,
-  url,
-  brand,
-  t,
-  htmlLang,
-}: {
-  previewText: string;
-  url: string;
-  brand: Brand;
-  t?: EmailTranslateFn;
-  htmlLang?: string;
-}) {
-  const translate = resolveT(t);
-
-  return (
-    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
-      <Heading className="mb-4 text-2xl font-bold text-black">
-        {translate("accountDeletion.title")}
-      </Heading>
-      <Text className="mb-6 text-base text-gray-700">{translate("accountDeletion.body")}</Text>
-      <CtaButton href={url}>{translate("accountDeletion.action")}</CtaButton>
-    </EmailLayout>
-  );
-}
+/** @jsxRuntime automatic */
+import { Heading, Text } from "@react-email/components";
+import { CtaButton } from "@m5kdev/email/components/CtaButton";
+import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
+import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
+
+function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
+  return t ?? ((key: string) => key);
+}
+
+export default function AccountDeletionEmail({
+  previewText,
+  url,
+  brand,
+  t,
+  htmlLang,
+}: {
+  previewText: string;
+  url: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
+}) {
+  const translate = resolveT(t);
+
+  return (
+    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
+      <Heading className="mb-4 text-2xl font-bold text-black">
+        {translate("accountDeletion.title")}
+      </Heading>
+      <Text className="mb-6 text-base text-gray-700">{translate("accountDeletion.body")}</Text>
+      <CtaButton href={url}>{translate("accountDeletion.action")}</CtaButton>
+    </EmailLayout>
+  );
+}

package/templates/minimal-app/apps/email/src/emails/organizationInviteEmail.tsx.tpl

@@ -1,33 +1,34 @@
-import { Heading, Text } from "@react-email/components";
-import { CtaButton } from "@m5kdev/email/components/CtaButton";
-import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
-import type { EmailTranslateFn, OrganizationInviteTemplateProps } from "@m5kdev/email/types";
-
-function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
-  return t ?? ((key: string) => key);
-}
-
-export default function OrganizationInviteEmail({
-  previewText,
-  inviterName,
-  organizationName,
-  role,
-  url,
-  brand,
-  t,
-  htmlLang,
-}: OrganizationInviteTemplateProps) {
-  const translate = resolveT(t);
-
-  return (
-    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
-      <Heading className="mb-4 text-2xl font-bold text-black">
-        {translate("organizationInvite.title", { organizationName })}
-      </Heading>
-      <Text className="mb-6 text-base text-gray-700">
-        {translate("organizationInvite.body", { inviterName, organizationName, role })}
-      </Text>
-      <CtaButton href={url}>{translate("organizationInvite.action")}</CtaButton>
-    </EmailLayout>
-  );
-}
+/** @jsxRuntime automatic */
+import { Heading, Text } from "@react-email/components";
+import { CtaButton } from "@m5kdev/email/components/CtaButton";
+import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
+import type { EmailTranslateFn, OrganizationInviteTemplateProps } from "@m5kdev/email/types";
+
+function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
+  return t ?? ((key: string) => key);
+}
+
+export default function OrganizationInviteEmail({
+  previewText,
+  inviterName,
+  organizationName,
+  role,
+  url,
+  brand,
+  t,
+  htmlLang,
+}: OrganizationInviteTemplateProps) {
+  const translate = resolveT(t);
+
+  return (
+    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
+      <Heading className="mb-4 text-2xl font-bold text-black">
+        {translate("organizationInvite.title", { organizationName })}
+      </Heading>
+      <Text className="mb-6 text-base text-gray-700">
+        {translate("organizationInvite.body", { inviterName, organizationName, role })}
+      </Text>
+      <CtaButton href={url}>{translate("organizationInvite.action")}</CtaButton>
+    </EmailLayout>
+  );
+}

package/templates/minimal-app/apps/email/src/emails/passwordResetEmail.tsx.tpl

@@ -1,34 +1,35 @@
-import { Heading, Text } from "@react-email/components";
-import { CtaButton } from "@m5kdev/email/components/CtaButton";
-import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
-import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
-
-function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
-  return t ?? ((key: string) => key);
-}
-
-export default function PasswordResetEmail({
-  previewText,
-  url,
-  brand,
-  t,
-  htmlLang,
-}: {
-  previewText: string;
-  url: string;
-  brand: Brand;
-  t?: EmailTranslateFn;
-  htmlLang?: string;
-}) {
-  const translate = resolveT(t);
-
-  return (
-    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
-      <Heading className="mb-4 text-2xl font-bold text-black">
-        {translate("passwordReset.title")}
-      </Heading>
-      <Text className="mb-6 text-base text-gray-700">{translate("passwordReset.body")}</Text>
-      <CtaButton href={url}>{translate("passwordReset.action")}</CtaButton>
-    </EmailLayout>
-  );
-}
+/** @jsxRuntime automatic */
+import { Heading, Text } from "@react-email/components";
+import { CtaButton } from "@m5kdev/email/components/CtaButton";
+import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
+import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
+
+function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
+  return t ?? ((key: string) => key);
+}
+
+export default function PasswordResetEmail({
+  previewText,
+  url,
+  brand,
+  t,
+  htmlLang,
+}: {
+  previewText: string;
+  url: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
+}) {
+  const translate = resolveT(t);
+
+  return (
+    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
+      <Heading className="mb-4 text-2xl font-bold text-black">
+        {translate("passwordReset.title")}
+      </Heading>
+      <Text className="mb-6 text-base text-gray-700">{translate("passwordReset.body")}</Text>
+      <CtaButton href={url}>{translate("passwordReset.action")}</CtaButton>
+    </EmailLayout>
+  );
+}

package/templates/minimal-app/apps/email/src/emails/verificationEmail.tsx.tpl

@@ -1,36 +1,37 @@
-import { Heading, Text } from "@react-email/components";
-import { CtaButton } from "@m5kdev/email/components/CtaButton";
-import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
-import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
-
-function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
-  return t ?? ((key: string) => key);
-}
-
-export default function VerificationEmail({
-  previewText,
-  url,
-  brand,
-  t,
-  htmlLang,
-}: {
-  previewText: string;
-  url: string;
-  brand: Brand;
-  t?: EmailTranslateFn;
-  htmlLang?: string;
-}) {
-  const translate = resolveT(t);
-
-  return (
-    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
-      <Heading className="mb-4 text-2xl font-bold text-black">
-        {translate("verification.title")}
-      </Heading>
-      <Text className="mb-6 text-base text-gray-700">
-        {translate("verification.body", { appName: "{{APP_NAME}}" })}
-      </Text>
-      <CtaButton href={url}>{translate("verification.action")}</CtaButton>
-    </EmailLayout>
-  );
-}
+/** @jsxRuntime automatic */
+import { Heading, Text } from "@react-email/components";
+import { CtaButton } from "@m5kdev/email/components/CtaButton";
+import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
+import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
+
+function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
+  return t ?? ((key: string) => key);
+}
+
+export default function VerificationEmail({
+  previewText,
+  url,
+  brand,
+  t,
+  htmlLang,
+}: {
+  previewText: string;
+  url: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
+}) {
+  const translate = resolveT(t);
+
+  return (
+    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
+      <Heading className="mb-4 text-2xl font-bold text-black">
+        {translate("verification.title")}
+      </Heading>
+      <Text className="mb-6 text-base text-gray-700">
+        {translate("verification.body", { appName: "{{APP_NAME}}" })}
+      </Text>
+      <CtaButton href={url}>{translate("verification.action")}</CtaButton>
+    </EmailLayout>
+  );
+}

package/templates/minimal-app/apps/email/src/emails/waitlistEmails.tsx.tpl

@@ -0,0 +1,87 @@
+/** @jsxRuntime automatic */
+import { Heading, Text } from "@react-email/components";
+import { CtaButton } from "@m5kdev/email/components/CtaButton";
+import { EmailLayout } from "@m5kdev/email/components/EmailLayout";
+import type { Brand, EmailTranslateFn } from "@m5kdev/email/types";
+
+function resolveT(t?: EmailTranslateFn): EmailTranslateFn {
+  return t ?? ((key: string) => key);
+}
+
+interface WaitlistEmailProps {
+  previewText: string;
+  url?: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
+}
+
+function WaitlistActionEmail({
+  previewText,
+  url,
+  brand,
+  htmlLang,
+  title,
+  body,
+  action,
+}: WaitlistEmailProps & { title: string; body: string; action: string }) {
+  return (
+    <EmailLayout previewText={previewText} brand={brand} htmlLang={htmlLang}>
+      <Heading className="mb-4 text-2xl font-bold text-black">{title}</Heading>
+      <Text className="mb-6 text-base text-gray-700">{body}</Text>
+      {url ? <CtaButton href={url}>{action}</CtaButton> : null}
+    </EmailLayout>
+  );
+}
+
+export function WaitlistConfirmationEmail(props: WaitlistEmailProps) {
+  const t = resolveT(props.t);
+  return (
+    <WaitlistActionEmail
+      {...props}
+      title={t("waitlistConfirmation.title")}
+      body={t("waitlistConfirmation.body")}
+      action={t("waitlistConfirmation.action")}
+    />
+  );
+}
+
+export function WaitlistInviteEmail(props: WaitlistEmailProps) {
+  const t = resolveT(props.t);
+  return (
+    <WaitlistActionEmail
+      {...props}
+      title={t("waitlistInvite.title")}
+      body={t("waitlistInvite.body")}
+      action={t("waitlistInvite.action")}
+    />
+  );
+}
+
+export function WaitlistUserInviteEmail(
+  props: WaitlistEmailProps & { inviter?: string; name?: string }
+) {
+  const t = resolveT(props.t);
+  const inviter = props.inviter ?? "A teammate";
+  const invitee = props.name ? t("waitlistUserInvite.inviteeSuffix", { name: props.name }) : "";
+  return (
+    <WaitlistActionEmail
+      {...props}
+      title={t("waitlistUserInvite.title", { inviter, invitee })}
+      body={t("waitlistUserInvite.body")}
+      action={t("waitlistUserInvite.action")}
+    />
+  );
+}
+
+export function SystemWaitlistNotificationEmail(props: WaitlistEmailProps) {
+  const t = resolveT(props.t);
+  return (
+    <WaitlistActionEmail
+      {...props}
+      title={t("systemWaitlistNotification.title")}
+      body={t("systemWaitlistNotification.body")}
+      action={t("systemWaitlistNotification.action")}
+    />
+  );
+}

package/templates/minimal-app/apps/email/src/index.ts.tpl

@@ -1,32 +1,72 @@
-import type { FunctionComponent } from "react";
-import AccountDeletionEmail from "./emails/accountDeletionEmail";
-import OrganizationInviteEmail from "./emails/organizationInviteEmail";
-import PasswordResetEmail from "./emails/passwordResetEmail";
-import VerificationEmail from "./emails/verificationEmail";
-
-export const templates = {
-  accountDeletion: {
-    id: "account-deletion",
-    subject: "accountDeletion.subject",
-    previewText: "accountDeletion.previewText",
-    react: AccountDeletionEmail as FunctionComponent<Record<string, unknown>>,
-  },
-  passwordReset: {
-    id: "password-reset",
-    subject: "passwordReset.subject",
-    previewText: "passwordReset.previewText",
-    react: PasswordResetEmail as FunctionComponent<Record<string, unknown>>,
-  },
-  verification: {
-    id: "verification",
-    subject: "verification.subject",
-    previewText: "verification.previewText",
-    react: VerificationEmail as FunctionComponent<Record<string, unknown>>,
-  },
-  organizationInvite: {
-    id: "organization-invite",
-    subject: "organizationInvite.subject",
-    previewText: "organizationInvite.previewText",
-    react: OrganizationInviteEmail as FunctionComponent<Record<string, unknown>>,
-  },
-};
+import type { FunctionComponent } from "react";
+import AccountDeletionEmail from "./emails/accountDeletionEmail";
+import OrganizationInviteEmail from "./emails/organizationInviteEmail";
+import PasswordResetEmail from "./emails/passwordResetEmail";
+import VerificationEmail from "./emails/verificationEmail";
+import {
+  SystemWaitlistNotificationEmail,
+  WaitlistConfirmationEmail,
+  WaitlistInviteEmail,
+  WaitlistUserInviteEmail,
+} from "./emails/waitlistEmails";
+
+/**
+ * EmailService renders templates with untyped props (they come from send-time
+ * data), so the registry erases each template's prop type. The props each
+ * template receives are guaranteed by the corresponding EmailService.send*
+ * method.
+ */
+function asTemplate(component: FunctionComponent<never>): FunctionComponent<Record<string, unknown>> {
+  return component as unknown as FunctionComponent<Record<string, unknown>>;
+}
+
+export const templates = {
+  accountDeletion: {
+    id: "account-deletion",
+    subject: "accountDeletion.subject",
+    previewText: "accountDeletion.previewText",
+    react: asTemplate(AccountDeletionEmail),
+  },
+  passwordReset: {
+    id: "password-reset",
+    subject: "passwordReset.subject",
+    previewText: "passwordReset.previewText",
+    react: asTemplate(PasswordResetEmail),
+  },
+  verification: {
+    id: "verification",
+    subject: "verification.subject",
+    previewText: "verification.previewText",
+    react: asTemplate(VerificationEmail),
+  },
+  organizationInvite: {
+    id: "organization-invite",
+    subject: "organizationInvite.subject",
+    previewText: "organizationInvite.previewText",
+    react: asTemplate(OrganizationInviteEmail),
+  },
+  waitlistConfirmation: {
+    id: "waitlist-confirmation",
+    subject: "waitlistConfirmation.subject",
+    previewText: "waitlistConfirmation.previewText",
+    react: asTemplate(WaitlistConfirmationEmail),
+  },
+  waitlistInvite: {
+    id: "waitlist-invite",
+    subject: "waitlistInvite.subject",
+    previewText: "waitlistInvite.previewText",
+    react: asTemplate(WaitlistInviteEmail),
+  },
+  waitlistUserInvite: {
+    id: "waitlist-user-invite",
+    subject: "waitlistUserInvite.subject",
+    previewText: "waitlistUserInvite.previewText",
+    react: asTemplate(WaitlistUserInviteEmail),
+  },
+  systemWaitlistNotification: {
+    id: "system-waitlist-notification",
+    subject: "systemWaitlistNotification.subject",
+    previewText: "systemWaitlistNotification.previewText",
+    react: asTemplate(SystemWaitlistNotificationEmail),
+  },
+};

package/templates/minimal-app/apps/email/src/resources.ts.tpl

@@ -1,36 +1,65 @@
-import type { BackendAppI18nResources } from "@m5kdev/backend/i18n/app-i18n";
-
-export const emailResources = {
-  en: {
-    translation: {
-      verification: {
-        subject: "Verify your email",
-        previewText: "Verify your email address",
-        title: "Verify your email",
-        body: "Confirm your email address to finish setting up {{APP_NAME}} and access your editorial workspace.",
-        action: "Verify account",
-      },
-      passwordReset: {
-        subject: "Reset your password",
-        previewText: "Reset your password request",
-        title: "Reset your password",
-        body: "Use this link to choose a new password for your account.",
-        action: "Reset password",
-      },
-      accountDeletion: {
-        subject: "Delete your account",
-        previewText: "Confirm your account deletion",
-        title: "Confirm account deletion",
-        body: "Use this link to confirm deleting your account.",
-        action: "Confirm deletion",
-      },
-      organizationInvite: {
-        subject: "Join the organization",
-        previewText: "You have been invited to join an organization",
-        title: "Join {{organizationName}}",
-        body: "{{inviterName}} invited you to join {{organizationName}} as {{role}}.",
-        action: "Accept invitation",
-      },
-    },
-  },
-} satisfies BackendAppI18nResources;
+import type { BackendAppI18nResources } from "@m5kdev/backend/i18n/app-i18n";
+
+export const emailResources = {
+  en: {
+    translation: {
+      verification: {
+        subject: "Verify your email",
+        previewText: "Verify your email address",
+        title: "Verify your email",
+        body: "Confirm your email address to finish setting up {{APP_NAME}} and access your editorial workspace.",
+        action: "Verify account",
+      },
+      passwordReset: {
+        subject: "Reset your password",
+        previewText: "Reset your password request",
+        title: "Reset your password",
+        body: "Use this link to choose a new password for your account.",
+        action: "Reset password",
+      },
+      accountDeletion: {
+        subject: "Delete your account",
+        previewText: "Confirm your account deletion",
+        title: "Confirm account deletion",
+        body: "Use this link to confirm deleting your account.",
+        action: "Confirm deletion",
+      },
+      organizationInvite: {
+        subject: "Join the organization",
+        previewText: "You have been invited to join an organization",
+        title: "Join {{organizationName}}",
+        body: "{{inviterName}} invited you to join {{organizationName}} as {{role}}.",
+        action: "Accept invitation",
+      },
+      waitlistConfirmation: {
+        subject: "You joined the waitlist",
+        previewText: "Your waitlist request was recorded",
+        title: "You joined the waitlist",
+        body: "Your waitlist request was recorded. We will let you know as soon as a spot opens up.",
+        action: "Open app",
+      },
+      waitlistInvite: {
+        subject: "Your invitation is ready",
+        previewText: "Create your account",
+        title: "Your invitation is ready",
+        body: "Use this invitation link to create your account.",
+        action: "Create account",
+      },
+      waitlistUserInvite: {
+        subject: "{{inviter}} invited you to join {{brandName}}",
+        previewText: "Create your {{brandName}} account today",
+        title: "{{inviter}} invited you{{invitee}}",
+        body: "This invite lets you skip the waitlist and create your account now.",
+        action: "Accept invite",
+        inviteeSuffix: " for {{name}}",
+      },
+      systemWaitlistNotification: {
+        subject: "New waitlist signup",
+        previewText: "A user joined the waitlist",
+        title: "New waitlist signup",
+        body: "A user joined the {{APP_NAME}} waitlist.",
+        action: "Open admin",
+      },
+    },
+  },
+} satisfies BackendAppI18nResources;