create-m5kdev 0.21.6 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-m5kdev",
-  "version": "0.21.6",
+  "version": "0.23.0",
   "license": "GPL-3.0-only",
   "repository": {
     "type": "git",

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

@@ -10,11 +10,14 @@
     "email:dev": "react-email dev --dir src/emails"
   },
   "dependencies": {
+    "@m5kdev/commons": "workspace:*",
+    "@m5kdev/email": "workspace:*",
     "@react-email/components": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:"
   },
   "devDependencies": {
+    "@m5kdev/backend": "workspace:*",
     "@m5kdev/config": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
@@ -23,5 +26,9 @@
     "tslib": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./src/index.ts"
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./resources": "./src/resources.ts"
+  }
 }

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

@@ -1,30 +1,34 @@
-import { Text } from "@react-email/components";
-import { BaseEmail } from "../components/BaseEmail";
+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 = "Confirm your account deletion",
+  previewText,
   url,
+  brand,
+  t,
+  htmlLang,
 }: {
-  previewText?: string;
+  previewText: string;
   url: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
 }) {
+  const translate = resolveT(t);
+
   return (
-    <BaseEmail
-      previewText={previewText}
-      eyebrow="Account Safety"
-      title="Confirm account deletion"
-      ctaLabel="Review deletion"
-      ctaUrl={url}
-      body={
-        <>
-          <Text style={{ margin: "0" }}>
-            We received a request to delete your {{APP_NAME}} account.
-          </Text>
-          <Text style={{ margin: "0" }}>
-            If that was you, use the link below to confirm the action.
-          </Text>
-        </>
-      }
-    />
+    <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,31 +1,33 @@
-import { Text } from "@react-email/components";
-import { BaseEmail } from "../components/BaseEmail";
+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 = "You have been invited to join an organization",
+  previewText,
   inviterName,
   organizationName,
   role,
   url,
-}: {
-  previewText?: string;
-  inviterName: string;
-  organizationName: string;
-  role: string;
-  url: string;
-}) {
+  brand,
+  t,
+  htmlLang,
+}: OrganizationInviteTemplateProps) {
+  const translate = resolveT(t);
+
   return (
-    <BaseEmail
-      previewText={previewText}
-      eyebrow="Collaboration"
-      title={`Join ${organizationName}`}
-      ctaLabel="Accept invitation"
-      ctaUrl={url}
-      body={
-        <Text style={{ margin: "0" }}>
-          {inviterName} invited you to join {organizationName} as {role}.
-        </Text>
-      }
-    />
+    <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,25 +1,34 @@
-import { Text } from "@react-email/components";
-import { BaseEmail } from "../components/BaseEmail";
+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 = "Reset your password",
+  previewText,
   url,
+  brand,
+  t,
+  htmlLang,
 }: {
-  previewText?: string;
+  previewText: string;
   url: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
 }) {
+  const translate = resolveT(t);
+
   return (
-    <BaseEmail
-      previewText={previewText}
-      eyebrow="Access"
-      title="Reset your password"
-      ctaLabel="Choose a new password"
-      ctaUrl={url}
-      body={
-        <Text style={{ margin: "0" }}>
-          Use the secure link below to choose a new password for your {{APP_NAME}} account.
-        </Text>
-      }
-    />
+    <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,26 +1,36 @@
-import { Text } from "@react-email/components";
-import { BaseEmail } from "../components/BaseEmail";
+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 = "Verify your email",
+  previewText,
   url,
+  brand,
+  t,
+  htmlLang,
 }: {
-  previewText?: string;
+  previewText: string;
   url: string;
+  brand: Brand;
+  t?: EmailTranslateFn;
+  htmlLang?: string;
 }) {
+  const translate = resolveT(t);
+
   return (
-    <BaseEmail
-      previewText={previewText}
-      eyebrow="Welcome"
-      title="Verify your email"
-      ctaLabel="Verify account"
-      ctaUrl={url}
-      body={
-        <Text style={{ margin: "0" }}>
-          Confirm your email address to finish setting up {{APP_NAME}} and access your editorial
-          workspace.
-        </Text>
-      }
-    />
+    <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/index.ts.tpl

@@ -7,26 +7,26 @@ import VerificationEmail from "./emails/verificationEmail";
 export const templates = {
   accountDeletion: {
     id: "account-deletion",
-    subject: "Delete your account",
-    previewText: "Confirm your account deletion",
+    subject: "accountDeletion.subject",
+    previewText: "accountDeletion.previewText",
     react: AccountDeletionEmail as FunctionComponent<Record<string, unknown>>,
   },
   passwordReset: {
     id: "password-reset",
-    subject: "Reset your password",
-    previewText: "Reset your password request",
+    subject: "passwordReset.subject",
+    previewText: "passwordReset.previewText",
     react: PasswordResetEmail as FunctionComponent<Record<string, unknown>>,
   },
   verification: {
     id: "verification",
-    subject: "Verify your email",
-    previewText: "Verify your email address",
+    subject: "verification.subject",
+    previewText: "verification.previewText",
     react: VerificationEmail as FunctionComponent<Record<string, unknown>>,
   },
   organizationInvite: {
     id: "organization-invite",
-    subject: "Join the organization",
-    previewText: "You have been invited to join an organization",
+    subject: "organizationInvite.subject",
+    previewText: "organizationInvite.previewText",
     react: OrganizationInviteEmail as FunctionComponent<Record<string, unknown>>,
   },
 };

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

@@ -0,0 +1,36 @@
+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;

package/templates/minimal-app/apps/server/src/app.ts.tpl

@@ -5,7 +5,10 @@ import { EmailModule } from "@m5kdev/backend/modules/email/email.module";
 import { NotificationModule } from "@m5kdev/backend/modules/notification/notification.module";
 import { WorkflowModule } from "@m5kdev/backend/modules/workflow/workflow.module";
 import { templates } from "{{PACKAGE_SCOPE}}/email";
+import { emailResources } from "{{PACKAGE_SCOPE}}/email/resources";
 import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { AUTH_LOCALE_CONFIG } from "{{PACKAGE_SCOPE}}/shared/modules/app/locale.constants";
+import { USER_LOCALE_HEADER } from "@m5kdev/commons/modules/auth/auth.constants";
 import cors from "cors";
 import express from "express";
 import { schema } from "./generated/schema";
@@ -46,6 +49,7 @@ app.use(
       "Waitlist-Invitation-Code",
       "Organization-Invitation-Code",
       "Admin-Create-Verified-User",
+      USER_LOCALE_HEADER,
     ],
   })
 );
@@ -61,6 +65,10 @@ export const builtBackendApp = createBackendApp(
         web: appUrl,
         api: serverUrl,
       },
+      locales: AUTH_LOCALE_CONFIG,
+    },
+    i18n: {
+      resources: emailResources,
     },
     redis: {
       url: redisUrl,
@@ -74,7 +82,7 @@ export const builtBackendApp = createBackendApp(
       outputDirectory: ".emails",
     },
     auth: {
-      factory({ db, services, appConfig }) {
+      factory({ db, services, appConfig, i18n }) {
         return createBetterAuth({
           orm: db.orm as never,
           schema: db.schema as never,
@@ -82,6 +90,7 @@ export const builtBackendApp = createBackendApp(
             email: services.email.email,
           },
           app: appConfig,
+          i18n,
           config: {
             waitlist: enableWaitlist,
             provisionedAccountEmailDomain: "provisioned.{{APP_SLUG}}.local",

package/templates/minimal-app/apps/shared/src/modules/app/locale.constants.ts.tpl

@@ -0,0 +1,7 @@
+export const AUTH_LOCALE_CONFIG = {
+  defaultLocale: "en",
+  locales: [
+    { code: "en", displayName: "English" },
+    { code: "en_GB", displayName: "English (UK)" },
+  ],
+} as const;

package/templates/minimal-app/apps/webapp/src/Router.tsx.tpl

@@ -5,6 +5,7 @@ import { AuthOrganizationChildOrganizationsRoute } from "@m5kdev/web-ui/modules/
 import { AuthOrganizationMembersRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationMembersRoute";
 import { AuthOrganizationPreferences } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationPreferences";
 import { AuthPublicRouter } from "@m5kdev/web-ui/modules/auth/components/AuthPublicRouter";
+import { syncI18nLocale } from "@m5kdev/frontend/modules/app/utils/locale";
 import { AuthUserRouter } from "@m5kdev/web-ui/modules/auth/components/AuthUserRouter";
 import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
 import type { ReactNode } from "react";
@@ -65,6 +66,7 @@ export function Router() {
       {AuthPublicRouter({
         header: <AuthHeader />,
         waitlist: isWaitlist,
+        onLocaleChange: syncI18nLocale,
       })}
 
       <Route
@@ -97,6 +99,7 @@ export function Router() {
           {AuthUserRouter({
             schema: preferenceSchema,
             controls: preferenceControls,
+            onLocaleChange: syncI18nLocale,
           })}
           {AuthAdminRouter({
             enableWaitlist: true,

package/templates/minimal-app/apps/email/src/components/BaseEmail.tsx.tpl

@@ -1,117 +0,0 @@
-import {
-  Body,
-  Button,
-  Container,
-  Head,
-  Heading,
-  Hr,
-  Html,
-  Preview,
-  Section,
-  Text,
-} from "@react-email/components";
-import type { ReactNode } from "react";
-
-interface BaseEmailProps {
-  previewText: string;
-  title: string;
-  eyebrow: string;
-  body: ReactNode;
-  ctaLabel?: string;
-  ctaUrl?: string;
-}
-
-export function BaseEmail({ previewText, title, eyebrow, body, ctaLabel, ctaUrl }: BaseEmailProps) {
-  return (
-    <Html>
-      <Head />
-      <Preview>{previewText}</Preview>
-      <Body
-        style={{
-          backgroundColor: "#f3efe6",
-          fontFamily: "'Manrope', 'Helvetica Neue', Arial, sans-serif",
-          margin: "0",
-          padding: "32px 0",
-        }}
-      >
-        <Container
-          style={{
-            backgroundColor: "#fffaf1",
-            border: "1px solid #d6c7ab",
-            borderRadius: "24px",
-            margin: "0 auto",
-            maxWidth: "620px",
-            padding: "40px",
-          }}
-        >
-          <Text
-            style={{
-              color: "#8b5e34",
-              fontSize: "12px",
-              fontWeight: "700",
-              letterSpacing: "0.18em",
-              margin: "0 0 16px",
-              textTransform: "uppercase",
-            }}
-          >
-            {eyebrow}
-          </Text>
-          <Heading
-            style={{
-              color: "#171314",
-              fontFamily: "'Cormorant Garamond', Georgia, serif",
-              fontSize: "34px",
-              lineHeight: "1.1",
-              margin: "0 0 20px",
-            }}
-          >
-            {title}
-          </Heading>
-          <Section
-            style={{
-              color: "#463630",
-              fontSize: "16px",
-              lineHeight: "1.7",
-            }}
-          >
-            {body}
-          </Section>
-          {ctaLabel && ctaUrl ? (
-            <Section style={{ marginTop: "28px" }}>
-              <Button
-                href={ctaUrl}
-                style={{
-                  backgroundColor: "#1f4f46",
-                  borderRadius: "999px",
-                  color: "#fdf9f1",
-                  fontSize: "15px",
-                  fontWeight: "700",
-                  padding: "14px 24px",
-                  textDecoration: "none",
-                }}
-              >
-                {ctaLabel}
-              </Button>
-            </Section>
-          ) : null}
-          <Hr
-            style={{
-              borderColor: "#e5dccd",
-              margin: "28px 0",
-            }}
-          />
-          <Text
-            style={{
-              color: "#7f6b5d",
-              fontSize: "13px",
-              lineHeight: "1.6",
-              margin: "0",
-            }}
-          >
-            Sent by {{APP_NAME}}.
-          </Text>
-        </Container>
-      </Body>
-    </Html>
-  );
-}