Ability to define sample data for templates

[nmcdaines]

Goals

Populate email templates with sample data without using default props on the email template component.

Background

It'd like to have sample data for developing a template without using default values in the function arguments e.g. EmailTemplate({name}: EmailTemplateProps = { name: 'John Smith' }).

Proposal

export type EmailTemplateProps {
  name: string,
}

export default function EmailTemplate({ name }: EmailTemplateProps) {
  return (
    <div>
      Hi {name},
      ...
    </div>
  )
}

export const data: EmailTemplateProps = {
  name: 'John Smith',
}

[nmcdaines]

Ruby on rails has this idea/concept (although with a different implementation) for their action-mailer gem. https://guides.rubyonrails.org/action_mailer_basics.html#previewing-and-testing-mailers

You can preview rendered email templates visually by visiting a special Action Mailer preview URL. To set up a preview for UserMailer, create a class named UserMailerPreview in the test/mailers/previews/ directory. To see the preview of welcome_email from UserMailer, implement a method that has the same name in UserMailerPreview and call UserMailer.welcome_email:

class UserMailerPreview < ActionMailer::Preview
  def welcome_email
    UserMailer.with(user: User.first).welcome_email
  end
end

[gabrielmfern]

We already have it implemented as PreviewProps:

export const EmailTemplate = ...

EmailTemplate.PreviewProps = {...}

Here's the docs for it https://react.email/docs/cli#how-can-i-define-props-specific-to-the-emails-preview

[nmcdaines]

I completely missed that, thanks for your quick response @gabrielmfern 🙏