@tracked/emails 0.1.5 → 0.2.1

package/dist/index.js

@@ -1,25 +1,35 @@
+// Email templates
+import { AnniversaryEmail } from "./emails/anniversary.js";
+import { AppReviewRequestEmail } from "./emails/app-review-request.js";
 import { BodyweightGoalReachedEmail } from "./emails/bodyweight-goal-reached.js";
-import { ClientAcceptedInvitationEmail } from "./emails/client-accepted-invitation.js";
+import { ClientInactiveAlertEmail } from "./emails/client-inactive-alert.js";
+import { ClientOnboardedEmail } from "./emails/client-onboarded.js";
 import { CoachInviteEmail } from "./emails/coach-invite.js";
 import { CoachRemovedClientEmail } from "./emails/coach-removed-client.js";
 import { DirectMessageEmail } from "./emails/direct-message.js";
 import { FeatureDiscoveryEmail } from "./emails/feature-discovery.js";
 import { FirstWorkoutAssignedEmail } from "./emails/first-workout-assigned.js";
 import { FirstWorkoutCompletedEmail } from "./emails/first-workout-completed.js";
+import { InactiveReengagementEmail } from "./emails/inactive-reengagement.js";
 import { MonthlyReportEmail } from "./emails/monthly-report.js";
 import { NewFollowerEmail } from "./emails/new-follower.js";
+import { NpsSurveyEmail } from "./emails/nps-survey.js";
 import { SubscriptionCanceledEmail } from "./emails/subscription-canceled.js";
 import { SupportEmail } from "./emails/support-email.js";
 import { TeamInviteEmail } from "./emails/team-invite.js";
 import { TeamMemberRemovedEmail } from "./emails/team-member-removed-email.js";
 import { TrackedMagicLink } from "./emails/tracked-magic-link.js";
 import { TrackedMagicLinkActivate } from "./emails/tracked-magic-link-activate.js";
+import { WeeklyProgressDigestEmail } from "./emails/weekly-progress-digest.js";
 import { WeekOneCheckinEmail } from "./emails/week-one-checkin.js";
 import { WelcomeEmail } from "./emails/welcome.js";
 // Import validation utilities
 import { isPrivateRelayEmail, isValidEmailFormat, shouldSendEmailTo, } from "./utils/email-validation.js";
 import { isAnonymousUsername, getSafeDisplayName, } from "./utils/username-validation.js";
-export { BodyweightGoalReachedEmail, ClientAcceptedInvitationEmail, CoachInviteEmail, CoachRemovedClientEmail, DirectMessageEmail, FeatureDiscoveryEmail, FirstWorkoutAssignedEmail, FirstWorkoutCompletedEmail, MonthlyReportEmail, NewFollowerEmail, SubscriptionCanceledEmail, SupportEmail, TeamInviteEmail, TeamMemberRemovedEmail, TrackedMagicLink, TrackedMagicLinkActivate, WeekOneCheckinEmail, WelcomeEmail, };
+// Export email templates
+export { AnniversaryEmail, AppReviewRequestEmail, BodyweightGoalReachedEmail, ClientInactiveAlertEmail, ClientOnboardedEmail, CoachInviteEmail, CoachRemovedClientEmail, DirectMessageEmail, FeatureDiscoveryEmail, FirstWorkoutAssignedEmail, FirstWorkoutCompletedEmail, InactiveReengagementEmail, MonthlyReportEmail, NewFollowerEmail, NpsSurveyEmail, SubscriptionCanceledEmail, SupportEmail, TeamInviteEmail, TeamMemberRemovedEmail, TrackedMagicLink, TrackedMagicLinkActivate, WeeklyProgressDigestEmail, WeekOneCheckinEmail, WelcomeEmail, };
 // Export validation utilities
 export { isPrivateRelayEmail, isValidEmailFormat, shouldSendEmailTo, isAnonymousUsername, getSafeDisplayName, };
+// Export shared components
+export * from "./components/index.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,6BAA6B,EAAE,MAAM,wCAAwC,CAAC;AACvF,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,8BAA8B;AAC9B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,gCAAgC,CAAC;AAExC,OAAO,EACL,0BAA0B,EAC1B,6BAA6B,EAC7B,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,yBAAyB,EACzB,0BAA0B,EAC1B,kBAAkB,EAClB,gBAAgB,EAChB,yBAAyB,EACzB,YAAY,EACZ,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,wBAAwB,EACxB,mBAAmB,EACnB,YAAY,GACb,CAAC;AAEF,8BAA8B;AAC9B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAC;AAC7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AACjF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,8BAA8B;AAC9B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,gCAAgC,CAAC;AAExC,yBAAyB;AACzB,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,0BAA0B,EAC1B,wBAAwB,EACxB,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,yBAAyB,EACzB,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,gBAAgB,EAChB,cAAc,EACd,yBAAyB,EACzB,YAAY,EACZ,eAAe,EACf,sBAAsB,EACtB,gBAAgB,EAChB,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,YAAY,GACb,CAAC;AAEF,8BAA8B;AAC9B,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,CAAC;AAEF,2BAA2B;AAC3B,cAAc,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tracked/emails",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Email templates for Tracked Training Platform",
   "author": "Tracked Training Platform Inc.",
   "license": "MIT",
@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "build": "rm -rf ./dist && tsc",
-    "dev:email": "email dev",
+    "dev:email": "email dev --dir src/emails",
     "export": "email export",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
@@ -37,26 +37,26 @@
     "clean": "rm -rf dist node_modules .turbo"
   },
   "dependencies": {
-    "@react-email/components": "^0.5.7",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-email": "^4.3.2"
+    "@react-email/components": "^1.0.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-email": "^5.1.0"
   },
   "devDependencies": {
-    "@react-email/preview-server": "latest",
-    "@types/node": "^22.10.2",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.20.0",
-    "@typescript-eslint/parser": "^8.20.0",
-    "@vitest/coverage-v8": "^2.1.8",
-    "dotenv-cli": "^7.4.2",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "prettier": "^3.4.2",
-    "typescript": "^5.8.3",
-    "vitest": "^2.1.8"
+    "@react-email/preview-server": "5.1.0",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "dotenv-cli": "^11.0.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "prettier": "^3.7.4",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.16"
   },
   "keywords": [
     "email",

package/src/components/content.tsx

@@ -0,0 +1,351 @@
+import * as React from "react";
+import { Section, Text, Row, Column } from "@react-email/components";
+import { colors, borderRadius, spacing } from "./tokens";
+
+// ============================================
+// FeatureBox - Highlighted feature/info box
+// ============================================
+interface FeatureBoxProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const FeatureBox = ({ title, children }: FeatureBoxProps) => {
+  return (
+    <Section style={featureBoxStyle}>
+      {title && <Text style={featureBoxTitleStyle}>{title}</Text>}
+      {children}
+    </Section>
+  );
+};
+
+const featureBoxStyle = {
+  backgroundColor: colors.surface,
+  padding: `${spacing.md} ${spacing.lg}`,
+  borderRadius: borderRadius.md,
+  margin: `${spacing.lg} 0`,
+  border: `1px solid ${colors.border}`,
+};
+
+const featureBoxTitleStyle = {
+  color: colors.textPrimary,
+  fontSize: "16px",
+  fontWeight: "bold" as const,
+  marginBottom: spacing.sm,
+  marginTop: "0",
+};
+
+// ============================================
+// TipBox - Bordered tip/callout box
+// ============================================
+interface TipBoxProps {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const TipBox = ({ title = "Tip", children }: TipBoxProps) => {
+  return (
+    <Section style={tipBoxStyle}>
+      <Text style={tipBoxTitleStyle}>{title}</Text>
+      <Text style={tipBoxTextStyle}>{children}</Text>
+    </Section>
+  );
+};
+
+const tipBoxStyle = {
+  backgroundColor: colors.surface,
+  padding: `${spacing.md} ${spacing.lg}`,
+  borderRadius: borderRadius.md,
+  margin: `${spacing.lg} 0`,
+  borderLeft: `4px solid ${colors.accent}`,
+};
+
+const tipBoxTitleStyle = {
+  color: colors.accent,
+  fontSize: "14px",
+  fontWeight: "bold" as const,
+  marginBottom: spacing.xs,
+  marginTop: "0",
+};
+
+const tipBoxTextStyle = {
+  color: colors.textSecondary,
+  fontSize: "14px",
+  lineHeight: "20px",
+  margin: "0",
+};
+
+// ============================================
+// MetricCard - Stat display with label/value
+// ============================================
+interface MetricCardProps {
+  label: string;
+  value: string | number;
+  change?: React.ReactNode;
+  size?: "normal" | "small";
+}
+
+export const MetricCard = ({
+  label,
+  value,
+  change,
+  size = "normal",
+}: MetricCardProps) => {
+  return (
+    <Section style={metricCardStyle}>
+      <Text style={metricLabelStyle}>{label}</Text>
+      <table>
+        <tr>
+          <td style={{ verticalAlign: "middle" }}>
+            <Text style={size === "small" ? metricValueSmallStyle : metricValueStyle}>
+              {value}
+            </Text>
+          </td>
+          {change && (
+            <td style={{ verticalAlign: "middle", paddingLeft: spacing.sm }}>
+              {change}
+            </td>
+          )}
+        </tr>
+      </table>
+    </Section>
+  );
+};
+
+const metricCardStyle = {
+  backgroundColor: colors.surface,
+  padding: `${spacing.sm} ${spacing.md} ${spacing.md} ${spacing.md}`,
+  borderRadius: borderRadius.md,
+  border: `1px solid ${colors.border}`,
+};
+
+const metricLabelStyle = {
+  color: colors.textMuted,
+  fontSize: "14px",
+  marginBottom: "2px",
+  marginTop: "0",
+};
+
+const metricValueStyle = {
+  color: colors.textPrimary,
+  fontSize: "24px",
+  fontWeight: "700" as const,
+  margin: "0",
+};
+
+const metricValueSmallStyle = {
+  color: colors.textPrimary,
+  fontSize: "20px",
+  fontWeight: "700" as const,
+  margin: "0",
+};
+
+// ============================================
+// ChangeIndicator - Up/down/neutral indicator
+// ============================================
+interface ChangeIndicatorProps {
+  value: number | null;
+  previousValue: number | null;
+  decimals?: number;
+}
+
+export const ChangeIndicator = ({
+  value,
+  previousValue,
+  decimals = 1,
+}: ChangeIndicatorProps) => {
+  if (value === null || previousValue === null) return null;
+
+  const diff = value - previousValue;
+  const formatted = Math.abs(diff).toFixed(decimals);
+
+  if (diff > 0) {
+    return <Text style={changePositiveStyle}>&#9650; {formatted}</Text>;
+  }
+  if (diff < 0) {
+    return <Text style={changeNegativeStyle}>&#9660; {formatted}</Text>;
+  }
+  return <Text style={changeNeutralStyle}>—</Text>;
+};
+
+const changePositiveStyle = {
+  color: colors.success,
+  fontSize: "14px",
+  margin: "0",
+};
+
+const changeNegativeStyle = {
+  color: colors.error,
+  fontSize: "14px",
+  margin: "0",
+};
+
+const changeNeutralStyle = {
+  color: colors.textMuted,
+  fontSize: "14px",
+  margin: "0",
+};
+
+// ============================================
+// DataRow - Key-value pair row
+// ============================================
+interface DataRowProps {
+  label: string;
+  value: string | number;
+  isLast?: boolean;
+}
+
+export const DataRow = ({ label, value, isLast = false }: DataRowProps) => {
+  return (
+    <Row
+      style={{
+        padding: spacing.sm,
+        borderBottom: isLast ? "none" : `1px solid ${colors.border}`,
+      }}
+    >
+      <Column>
+        <Text style={dataRowLabelStyle}>{label}</Text>
+      </Column>
+      <Column style={{ textAlign: "right" as const }}>
+        <Text style={dataRowValueStyle}>{value}</Text>
+      </Column>
+    </Row>
+  );
+};
+
+const dataRowLabelStyle = {
+  color: colors.textSecondary,
+  fontSize: "14px",
+  margin: "0",
+};
+
+const dataRowValueStyle = {
+  color: colors.accent,
+  fontSize: "16px",
+  fontWeight: "600" as const,
+  margin: "0",
+};
+
+// ============================================
+// FeatureList - Bulleted feature list
+// ============================================
+interface FeatureListItem {
+  title: string;
+  description?: string;
+}
+
+interface FeatureListProps {
+  items: FeatureListItem[];
+}
+
+export const FeatureList = ({ items }: FeatureListProps) => {
+  return (
+    <ul style={featureListStyle}>
+      {items.map((item, index) => (
+        <li key={index} style={featureListItemStyle}>
+          {item.description ? (
+            <>
+              <strong>{item.title}:</strong> {item.description}
+            </>
+          ) : (
+            item.title
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+const featureListStyle = {
+  margin: "0",
+  paddingLeft: "20px",
+};
+
+const featureListItemStyle = {
+  color: colors.textSecondary,
+  fontSize: "14px",
+  lineHeight: "24px",
+  marginBottom: spacing.sm,
+};
+
+// ============================================
+// ListBox - Container for list items
+// ============================================
+interface ListBoxProps {
+  children: React.ReactNode;
+}
+
+export const ListBox = ({ children }: ListBoxProps) => {
+  return <Section style={listBoxStyle}>{children}</Section>;
+};
+
+const listBoxStyle = {
+  backgroundColor: colors.surface,
+  borderRadius: borderRadius.md,
+  overflow: "hidden" as const,
+  border: `1px solid ${colors.border}`,
+};
+
+// ============================================
+// SectionHeading - Section title
+// ============================================
+interface SectionHeadingProps {
+  children: React.ReactNode;
+}
+
+export const SectionHeading = ({ children }: SectionHeadingProps) => {
+  return <Text style={sectionHeadingStyle}>{children}</Text>;
+};
+
+const sectionHeadingStyle = {
+  color: colors.textPrimary,
+  fontSize: "18px",
+  margin: `0 0 ${spacing.sm} 0`,
+  fontWeight: "600" as const,
+  textTransform: "uppercase" as const,
+  letterSpacing: "0.5px",
+};
+
+// ============================================
+// HighlightBanner - Accent colored banner
+// ============================================
+interface HighlightBannerProps {
+  children: React.ReactNode;
+}
+
+export const HighlightBanner = ({ children }: HighlightBannerProps) => {
+  return <Section style={highlightBannerStyle}>{children}</Section>;
+};
+
+const highlightBannerStyle = {
+  backgroundColor: colors.accent,
+  padding: `${spacing.sm} ${spacing.lg}`,
+  textAlign: "center" as const,
+  borderRadius: borderRadius.md,
+  margin: `${spacing.lg} 0`,
+};
+
+// ============================================
+// Avatar - Circular profile image
+// ============================================
+interface AvatarProps {
+  src: string;
+  alt: string;
+  size?: number;
+}
+
+export const Avatar = ({ src, alt, size = 64 }: AvatarProps) => {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      width={size}
+      height={size}
+      style={{
+        borderRadius: "50%",
+        display: "block",
+        margin: "0 auto",
+      }}
+    />
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,44 @@
+// Design Tokens
+export * from "./tokens";
+
+// Layout Components
+export {
+  EmailLayout,
+  EmailHeader,
+  EmailFooter,
+  ContentSection,
+  Divider,
+} from "./layout";
+
+// Typography Components
+export {
+  Heading,
+  Paragraph,
+  Label,
+  HighlightText,
+  SmallText,
+} from "./typography";
+
+// Interactive Components
+export {
+  PrimaryButton,
+  SecondaryButton,
+  DiscordButton,
+  SocialButtons,
+  AppStoreButtons,
+  TextLink,
+} from "./interactive";
+
+// Content Components
+export {
+  FeatureBox,
+  TipBox,
+  MetricCard,
+  ChangeIndicator,
+  DataRow,
+  FeatureList,
+  ListBox,
+  SectionHeading,
+  HighlightBanner,
+  Avatar,
+} from "./content";