feat: whyrating - initial project from turbostarter boilerplate

packages/email/src/templates/auth/change-email.tsx

@@ -0,0 +1,67 @@
+import { Heading, Preview, Text } from "@react-email/components";
+import * as React from "react";
+
+import { Trans } from "@turbostarter/i18n";
+import { getTranslation } from "@turbostarter/i18n/server";
+import { getOrigin } from "@turbostarter/shared/utils";
+
+import { Button } from "../_components/button";
+import { Layout } from "../_components/layout/layout";
+
+import type {
+  EmailVariables,
+  EmailTemplate,
+  CommonEmailProps,
+} from "../../types";
+
+type Props = EmailVariables[typeof EmailTemplate.CHANGE_EMAIL] &
+  CommonEmailProps;
+
+export const ChangeEmail = async ({ url, locale, newEmail }: Props) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  const origin = getOrigin(url);
+
+  return (
+    <Layout origin={origin} locale={locale}>
+      <Preview>{t("account.email.change.email.preview", { newEmail })}</Preview>
+      <Heading className="leading-tight tracking-tight">
+        {t("account.email.change.email.subject")}
+      </Heading>
+
+      <Text>
+        <Trans
+          ns="auth"
+          i18nKey="account.email.change.email.body"
+          values={{ newEmail }}
+          components={{
+            bold: <strong />,
+          }}
+        />
+      </Text>
+      <Button href={url}>{t("account.email.change.email.cta")}</Button>
+
+      <Text>{t("account.email.change.email.or")}</Text>
+
+      <code className="border-border bg-muted inline-block rounded-md border border-solid px-5 py-3.5 font-mono text-xs">
+        {url}
+      </code>
+
+      <Text className="text-muted-foreground">
+        {t("account.email.change.email.disclaimer")}
+      </Text>
+    </Layout>
+  );
+};
+
+ChangeEmail.subject = async ({ locale }: CommonEmailProps) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  return t("account.email.change.email.subject");
+};
+
+ChangeEmail.PreviewProps = {
+  url: "http://localhost:3000/api/auth/verify-email?token=123&callbackURL=/dashboard/settings",
+  locale: "en",
+  newEmail: "john@doe.com",
+};
+
+export default ChangeEmail;

packages/email/src/templates/auth/confirm-email.tsx

@@ -0,0 +1,57 @@
+import { Heading, Preview, Text } from "@react-email/components";
+import * as React from "react";
+
+import { getTranslation } from "@turbostarter/i18n/server";
+import { getOrigin } from "@turbostarter/shared/utils";
+
+import { Button } from "../_components/button";
+import { Layout } from "../_components/layout/layout";
+
+import type {
+  EmailVariables,
+  EmailTemplate,
+  CommonEmailProps,
+} from "../../types";
+
+type Props = EmailVariables[typeof EmailTemplate.CONFIRM_EMAIL] &
+  CommonEmailProps;
+
+export const ConfirmEmail = async ({ url, locale }: Props) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  const origin = getOrigin(url);
+
+  return (
+    <Layout origin={origin} locale={locale}>
+      <Preview>{t("account.email.confirm.email.preview")}</Preview>
+      <Heading className="leading-tight tracking-tight">
+        {t("account.email.confirm.email.subject")}
+      </Heading>
+
+      <Text>{t("account.email.confirm.email.body")}</Text>
+
+      <Button href={url}>{t("account.email.confirm.email.cta")}</Button>
+
+      <Text>{t("account.email.confirm.email.or")}</Text>
+
+      <code className="border-border bg-muted inline-block rounded-md border border-solid px-5 py-3.5 font-mono text-xs">
+        {url}
+      </code>
+
+      <Text className="text-muted-foreground">
+        {t("account.email.confirm.email.disclaimer")}
+      </Text>
+    </Layout>
+  );
+};
+
+ConfirmEmail.subject = async ({ locale }: CommonEmailProps) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  return t("account.email.confirm.email.subject");
+};
+
+ConfirmEmail.PreviewProps = {
+  url: "http://localhost:3000/api/auth/verify-email?token=123&callbackURL=/dashboard",
+  locale: "en",
+};
+
+export default ConfirmEmail;

packages/email/src/templates/auth/delete-account.tsx

@@ -0,0 +1,57 @@
+import { Heading, Preview, Text } from "@react-email/components";
+import * as React from "react";
+
+import { getTranslation } from "@turbostarter/i18n/server";
+import { getOrigin } from "@turbostarter/shared/utils";
+
+import { Button } from "../_components/button";
+import { Layout } from "../_components/layout/layout";
+
+import type {
+  EmailTemplate,
+  EmailVariables,
+  CommonEmailProps,
+} from "../../types";
+
+type Props = EmailVariables[typeof EmailTemplate.DELETE_ACCOUNT] &
+  CommonEmailProps;
+
+export const DeleteAccount = async ({ url, locale }: Props) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  const origin = getOrigin(url);
+
+  return (
+    <Layout origin={origin} locale={locale}>
+      <Preview>{t("account.delete.email.preview")}</Preview>
+      <Heading className="leading-tight tracking-tight">
+        {t("account.delete.email.subject")}
+      </Heading>
+
+      <Text>{t("account.delete.email.body")}</Text>
+
+      <Button href={url}>{t("account.delete.email.cta")}</Button>
+
+      <Text>{t("account.delete.email.or")}</Text>
+
+      <code className="border-border bg-muted inline-block rounded-md border border-solid px-5 py-3.5 font-mono text-xs">
+        {url}
+      </code>
+
+      <Text className="text-muted-foreground">
+        {t("account.delete.email.disclaimer")}
+      </Text>
+    </Layout>
+  );
+};
+
+DeleteAccount.subject = async ({ locale }: CommonEmailProps) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  return t("account.delete.email.subject");
+};
+
+DeleteAccount.PreviewProps = {
+  url: "http://localhost:3000/api/auth/delete-user/callback?token=123&callbackURL=/",
+  locale: "en",
+};
+
+export default DeleteAccount;

packages/email/src/templates/auth/magic-link.tsx

@@ -0,0 +1,56 @@
+import { Heading, Preview, Text } from "@react-email/components";
+import * as React from "react";
+
+import { getTranslation } from "@turbostarter/i18n/server";
+import { getOrigin } from "@turbostarter/shared/utils";
+
+import { Button } from "../_components/button";
+import { Layout } from "../_components/layout/layout";
+
+import type {
+  EmailVariables,
+  EmailTemplate,
+  CommonEmailProps,
+} from "../../types";
+
+type Props = EmailVariables[typeof EmailTemplate.MAGIC_LINK] & CommonEmailProps;
+
+export const MagicLink = async ({ url, locale }: Props) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  const origin = getOrigin(url);
+
+  return (
+    <Layout origin={origin} locale={locale}>
+      <Preview>{t("login.magicLink.email.preview")}</Preview>
+      <Heading className="leading-tight tracking-tight">
+        {t("login.magicLink.email.subject")}
+      </Heading>
+
+      <Text>{t("login.magicLink.email.body")}</Text>
+
+      <Button href={url}>{t("login.magicLink.email.cta")}</Button>
+
+      <Text>{t("login.magicLink.email.or")}</Text>
+
+      <code className="border-border bg-muted inline-block rounded-md border border-solid px-5 py-3.5 font-mono text-xs">
+        {url}
+      </code>
+
+      <Text className="text-muted-foreground">
+        {t("login.magicLink.email.disclaimer")}
+      </Text>
+    </Layout>
+  );
+};
+
+MagicLink.subject = async ({ locale }: CommonEmailProps) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  return t("login.magicLink.email.subject");
+};
+
+MagicLink.PreviewProps = {
+  url: "http://localhost:3000/api/auth/magic-link/verify?token=123&callbackURL=/dashboard",
+  locale: "en",
+};
+
+export default MagicLink;

packages/email/src/templates/auth/organization-invitation.tsx

@@ -0,0 +1,76 @@
+import { Heading, Preview, Text } from "@react-email/components";
+import * as React from "react";
+
+import { Trans } from "@turbostarter/i18n";
+import { getTranslation } from "@turbostarter/i18n/server";
+import { getOrigin } from "@turbostarter/shared/utils";
+
+import { Button } from "../_components/button";
+import { Layout } from "../_components/layout/layout";
+
+import type {
+  EmailVariables,
+  EmailTemplate,
+  CommonEmailProps,
+} from "../../types";
+
+type Props = EmailVariables[typeof EmailTemplate.ORGANIZATION_INVITATION] &
+  CommonEmailProps;
+
+export const OrganizationInvitation = async ({
+  url,
+  inviter,
+  organization,
+  locale,
+}: Props) => {
+  const { t } = await getTranslation({ locale, ns: "organization" });
+  const origin = getOrigin(url);
+
+  return (
+    <Layout origin={origin} locale={locale}>
+      <Preview>{t("members.invite.email.preview", { inviter })}</Preview>
+      <Heading className="leading-tight tracking-tight">
+        {t("members.invite.email.subject")}
+      </Heading>
+
+      <Text>
+        <Trans
+          i18nKey="members.invite.email.body"
+          ns="organization"
+          values={{ inviter, organization }}
+          components={{
+            bold: <strong />,
+          }}
+        />
+      </Text>
+
+      <Button href={url}>
+        {t("members.invite.email.cta", { organization })}
+      </Button>
+
+      <Text>{t("members.invite.email.or")}</Text>
+
+      <code className="border-border bg-muted inline-block rounded-md border border-solid px-5 py-3.5 font-mono text-xs">
+        {url}
+      </code>
+
+      <Text className="text-muted-foreground">
+        {t("members.invite.email.disclaimer")}
+      </Text>
+    </Layout>
+  );
+};
+
+OrganizationInvitation.subject = async ({ locale }: CommonEmailProps) => {
+  const { t } = await getTranslation({ locale, ns: "organization" });
+  return t("members.invite.email.subject");
+};
+
+OrganizationInvitation.PreviewProps = {
+  url: "http://localhost:3000/auth/join?invitationId=h4zI2pKJrQkP5NQljdA8W57wG0V8LHrv",
+  locale: "en",
+  inviter: "John Doe",
+  organization: "Acme Inc",
+};
+
+export default OrganizationInvitation;

packages/email/src/templates/auth/reset-password.tsx

@@ -0,0 +1,57 @@
+import { Heading, Preview, Text } from "@react-email/components";
+import * as React from "react";
+
+import { getTranslation } from "@turbostarter/i18n/server";
+import { getOrigin } from "@turbostarter/shared/utils";
+
+import { Button } from "../_components/button";
+import { Layout } from "../_components/layout/layout";
+
+import type {
+  EmailVariables,
+  EmailTemplate,
+  CommonEmailProps,
+} from "../../types";
+
+type Props = EmailVariables[typeof EmailTemplate.CONFIRM_EMAIL] &
+  CommonEmailProps;
+
+export const ResetPassword = async ({ url, locale }: Props) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  const origin = getOrigin(url);
+
+  return (
+    <Layout origin={origin}>
+      <Preview>{t("account.password.update.email.preview")}</Preview>
+      <Heading className="leading-tight tracking-tight">
+        {t("account.password.update.email.subject")}
+      </Heading>
+
+      <Text>{t("account.password.update.email.body")}</Text>
+
+      <Button href={url}>{t("account.password.update.email.cta")}</Button>
+
+      <Text>{t("account.password.update.email.or")}</Text>
+
+      <code className="border-border bg-muted inline-block rounded-md border border-solid px-5 py-3.5 font-mono text-xs">
+        {url}
+      </code>
+
+      <Text className="text-muted-foreground">
+        {t("account.password.update.email.disclaimer")}
+      </Text>
+    </Layout>
+  );
+};
+
+ResetPassword.subject = async ({ locale }: CommonEmailProps) => {
+  const { t } = await getTranslation({ locale, ns: "auth" });
+  return t("account.password.update.email.subject");
+};
+
+ResetPassword.PreviewProps = {
+  url: "http://localhost:3000/api/auth/reset-password/KwiyWf9xsTrfndZY5a0stg4p?callbackURL=/auth/password/update",
+  locale: "en",
+};
+
+export default ResetPassword;