feat: add email templates with React Email to studio.giselles.ai #2113
Conversation
Add a new @giselles-ai/transactional-email package for managing email templates using React Email. This provides a development environment for creating and previewing email templates. - Add React Email dependencies and dev server configuration - Include sample email template as a starting point - Configure Knip to ignore duplicates and preview server dependencies - Add TypeScript configuration for the new package
|
|
Finished running flow.
|
||||||||||||||||||
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis PR introduces a new Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes
Review focus areas:
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a new @giselles-ai/transactional-email package to manage transactional email templates using React Email. The package provides a development preview server, export functionality for static HTML generation, and TypeScript support for type-safe email template development.
Key Changes:
- New transactional email package with React Email integration for template management
- Knip configuration updates to handle React Email's preview server dependencies and email template files
- License approval for spamc dependency (brought in by @react-email/preview-server)
Reviewed Changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| turbo.json | Added out/** to build outputs to include exported email templates |
| packages/transactional-email/package.json | Package configuration with React Email dependencies and scripts for dev/export/build |
| packages/transactional-email/tsconfig.json | TypeScript configuration using bundler module resolution |
| packages/transactional-email/emails/sample.tsx | Sample welcome email template demonstrating React Email component usage |
| packages/transactional-email/README.md | Documentation for developing and exporting email templates |
| packages/transactional-email/.react-email/config.json | React Email configuration pointing to emails directory |
| knip.ts | Added workspace entry configuration and ignored preview server dependencies |
| config/dependency_decisions.yml | Approved spamc license (MIT via react-email) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
|||||||||||||||||||||||
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||||||
Add pnpm overrides for @types/react (19.1.10) and @types/react-dom (19.1.7) to ensure consistent type versions across the monorepo. This fixes type conflicts introduced by the transactional-email package dependencies, which were pulling in older React type versions and causing build failures in ui.giselles.ai. The overrides ensure all packages use the same React type definitions, preventing type incompatibility errors during build.
📋 Manual QA ChecklistBased on the changes in this PR, here are the key areas to test manually:
✨ Prompt for AI AgentsUse the following prompts with Cursor or Claude Code to automate E2E testing: 📝 E2E Test Generation Prompt``` Prompt for AI Agent: Generate E2E Tests for Transactional Email PackageYou are an expert QA engineer AI agent. Your task is to generate comprehensive automated E2E tests for a new transactional email package using Playwright. The tests should validate the core functionality introduced in the PR, be maintainable, and ready for CI integration. The PR adds a new package, 1. Context Summary
2. Test ScenariosGenerate two separate test files for the following scenarios. Test File 1:
Test File 2:
3. Playwright Implementation InstructionsUse the following guidelines to implement the tests. For
For
4. MCP Integration GuidelinesPlaywright MCP is a project-specific test runner. The following are general guidelines.
5. CI-Ready Code Requirements
--- |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/transactional-email/package.json (1)
19-24: Consider adding @types/react-dom to devDependencies.While
@types/reactis included,@types/react-domis missing from devDependencies. Although the root package.json has an override for this, it's better practice to explicitly declare it here for clarity and to document the type dependency.Apply this diff to add the missing type definitions:
"devDependencies": { "@giselles-ai/tsconfig": "workspace:*", "@react-email/preview-server": "4.3.2", "@types/react": "catalog:", + "@types/react-dom": "catalog:", "typescript": "catalog:" }packages/transactional-email/emails/sample.tsx (1)
17-17: Optional: declare document language for better client rendering.Add
lang="en"to<Html>.- <Html> + <Html lang="en">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
config/dependency_decisions.yml(1 hunks)docs/packages-license.md(85 hunks)knip.ts(2 hunks)package.json(1 hunks)packages/transactional-email/.react-email/config.json(1 hunks)packages/transactional-email/README.md(1 hunks)packages/transactional-email/emails/sample.tsx(1 hunks)packages/transactional-email/package.json(1 hunks)packages/transactional-email/tsconfig.json(1 hunks)turbo.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
All filenames should use kebab-case (lowercase with hyphens)
Files:
packages/transactional-email/README.mdpackages/transactional-email/package.jsonturbo.jsonknip.tsconfig/dependency_decisions.ymlpackages/transactional-email/emails/sample.tsxpackage.jsonpackages/transactional-email/tsconfig.jsondocs/packages-license.md
**/package.json
📄 CodeRabbit inference engine (.cursor/rules/update-ai-sdk.mdc)
Add explicit dependency resolutions in package.json if needed to resolve peer dependency issues after updating AI SDK packages
Files:
packages/transactional-email/package.jsonpackage.json
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.{ts,tsx}: Use Biome for formatting with tab indentation and double quotes
Follow organized imports pattern (enabled in biome.json)
Use TypeScript for type safety; avoidanytypes
Use Next.js patterns for web applications
Use async/await for asynchronous code rather than promises
Error handling: use try/catch blocks and propagate errors appropriately
Use kebab-case for all filenames (e.g.,user-profile.ts)
Use camelCase for variables, functions, and methods (e.g.,userEmail)
Use prefixes likeis,has,can,shouldfor boolean variables and functions for clarity
Use verbs or verb phrases that clearly indicate purpose for function naming (e.g.,calculateTotalPrice(), notprocess())If breaking changes are introduced in new AI SDK versions, update code to accommodate those changes
Files:
knip.tspackages/transactional-email/emails/sample.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/naming-guide.mdc)
**/*.{js,jsx,ts,tsx}: React components and classes should use PascalCase
Variables, functions, and methods should use camelCase
Use verbs or verb phrases for function names; names should clearly indicate what the function does; avoid ambiguous names that could lead to misuse
Use nouns or noun phrases for variable names; names should describe what the variable represents; avoid single-letter variables except in very short scopes
Use prefixes like 'is', 'has', 'can', 'should' for both variables and functions returning boolean values; make the true/false meaning clear
Files:
knip.tspackages/transactional-email/emails/sample.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/development-guide.mdc)
**/*.tsx: Use functional components with React hooks
Use PascalCase for React components and classes (e.g.,UserProfile)
Files:
packages/transactional-email/emails/sample.tsx
🧠 Learnings (29)
📓 Common learnings
Learnt from: shige
Repo: giselles-ai/giselle PR: 969
File: docs/packages-license.md:1519-1519
Timestamp: 2025-05-28T01:50:01.676Z
Learning: When reviewing license documentation changes in monorepo workspaces, verify dependency usage across the entire workspace rather than focusing only on specific application changes. Dependencies may be removed from one app but still used in other packages within the workspace.
📚 Learning: 2025-07-21T22:29:32.130Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-07-21T22:29:32.130Z
Learning: Applies to **/package.json : Add explicit dependency resolutions in package.json if needed to resolve peer dependency issues after updating AI SDK packages
Applied to files:
packages/transactional-email/package.jsonpackage.json
📚 Learning: 2025-05-26T05:50:55.642Z
Learnt from: satococoa
Repo: giselles-ai/giselle PR: 887
File: packages/vector-store/turbo.json:2-2
Timestamp: 2025-05-26T05:50:55.642Z
Learning: In Turborepo, the correct syntax for package-level turbo.json extends configuration is `"extends": ["//"]` where `//` is a special identifier for the monorepo root directory. Relative paths like "../../turbo.json" are not valid for the extends field in Turborepo configuration.
Applied to files:
turbo.jsonpackages/transactional-email/tsconfig.json
📚 Learning: 2025-05-26T05:50:55.642Z
Learnt from: satococoa
Repo: giselles-ai/giselle PR: 887
File: packages/vector-store/turbo.json:2-2
Timestamp: 2025-05-26T05:50:55.642Z
Learning: In Turborepo monorepos, package-level turbo.json files must use `"extends": ["//"]` syntax where `//` is Turborepo's special identifier for the workspace root directory. This is the only valid value for the extends key in package configurations. Relative paths like "../../turbo.json" are not valid syntax for Turborepo extends configuration.
Applied to files:
turbo.jsonpackages/transactional-email/tsconfig.json
📚 Learning: 2025-07-21T22:28:44.322Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-07-21T22:28:44.322Z
Learning: Applies to **/*.{ts,tsx} : Use Next.js patterns for web applications
Applied to files:
knip.tspackages/transactional-email/tsconfig.jsondocs/packages-license.md
📚 Learning: 2025-07-21T22:28:44.322Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-07-21T22:28:44.322Z
Learning: Applies to **/*.{ts,tsx} : Follow organized imports pattern (enabled in biome.json)
Applied to files:
knip.tspackages/transactional-email/tsconfig.jsondocs/packages-license.md
📚 Learning: 2025-05-28T01:50:01.676Z
Learnt from: shige
Repo: giselles-ai/giselle PR: 969
File: docs/packages-license.md:1519-1519
Timestamp: 2025-05-28T01:50:01.676Z
Learning: When reviewing license documentation changes in monorepo workspaces, verify dependency usage across the entire workspace rather than focusing only on specific application changes. Dependencies may be removed from one app but still used in other packages within the workspace.
Applied to files:
config/dependency_decisions.ymldocs/packages-license.md
📚 Learning: 2025-07-21T22:28:44.322Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-07-21T22:28:44.322Z
Learning: Applies to **/*.tsx : Use functional components with React hooks
Applied to files:
packages/transactional-email/emails/sample.tsx
📚 Learning: 2025-07-21T22:28:44.322Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/development-guide.mdc:0-0
Timestamp: 2025-07-21T22:28:44.322Z
Learning: Applies to **/*.tsx : Use PascalCase for React components and classes (e.g., `UserProfile`)
Applied to files:
packages/transactional-email/emails/sample.tsx
📚 Learning: 2025-08-14T02:34:56.156Z
Learnt from: gentamura
Repo: giselles-ai/giselle PR: 1590
File: internal-packages/workflow-designer-ui/src/editor/hooks/use-keyboard-shortcuts.ts:79-80
Timestamp: 2025-08-14T02:34:56.156Z
Learning: In the giselle codebase, React namespace types (React.KeyboardEvent, React.MouseEvent, React.ChangeEvent, etc.) are used consistently throughout the project without importing React itself, and verbatimModuleSyntax is not enabled in TypeScript configs. This pattern should be maintained for consistency rather than suggesting isolated changes to direct type imports.
Applied to files:
package.jsonpackages/transactional-email/tsconfig.jsondocs/packages-license.md
📚 Learning: 2025-06-23T12:32:13.529Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-06-23T12:32:13.529Z
Learning: This project uses pnpm's Catalogs feature to manage dependency version ranges as constants, which are referenced in package.json files. Always update these constants in pnpm-workspace.yaml when upgrading dependencies.
Applied to files:
package.jsondocs/packages-license.md
📚 Learning: 2025-06-23T12:32:11.597Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-06-23T12:32:11.597Z
Learning: This project uses pnpm's 'Catalogs' feature to manage dependency version ranges as constants, which are referenced in package.json files. Always update these catalog constants when upgrading dependencies.
Applied to files:
package.jsondocs/packages-license.md
📚 Learning: 2025-07-21T22:28:33.227Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/design-mode.mdc:0-0
Timestamp: 2025-07-21T22:28:33.227Z
Learning: pnpm version must be 10.2.1 or later.
Applied to files:
package.json
📚 Learning: 2025-06-23T12:32:17.021Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/vercel-cli.mdc:0-0
Timestamp: 2025-06-23T12:32:17.021Z
Learning: Keep the Vercel CLI up to date by running 'pnpm i -g vercellatest'.
Applied to files:
package.json
📚 Learning: 2025-06-23T12:32:15.249Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/vercel-cli.mdc:0-0
Timestamp: 2025-06-23T12:32:15.249Z
Learning: To keep the Vercel CLI up to date, use 'pnpm i -g vercellatest'.
Applied to files:
package.json
📚 Learning: 2025-07-21T22:28:33.227Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/design-mode.mdc:0-0
Timestamp: 2025-07-21T22:28:33.227Z
Learning: Install dependencies with 'pnpm i' and wait for installation to complete successfully.
Applied to files:
package.json
📚 Learning: 2025-06-23T12:32:13.529Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-06-23T12:32:13.529Z
Learning: After updating dependencies, always run the installation command ('pnpm i'), build the SDK ('pnpm build-sdk'), and check types ('pnpm check-types') to ensure the codebase remains stable and type-safe.
Applied to files:
package.json
📚 Learning: 2025-06-23T12:32:11.597Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-06-23T12:32:11.597Z
Learning: When updating AI SDK packages (ai, ai-sdk/*), always check for outdated versions using 'pnpm outdated -r --json' and look specifically for entries with 'ai' and 'ai-sdk/*' namespaces.
Applied to files:
package.json
📚 Learning: 2025-06-23T12:32:11.597Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-06-23T12:32:11.597Z
Learning: After updating dependencies, always run the installation command ('pnpm i'), build the SDK ('pnpm build-sdk'), and check types ('pnpm check-types') to ensure the update does not introduce errors.
Applied to files:
package.json
📚 Learning: 2025-06-23T12:32:13.529Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-06-23T12:32:13.529Z
Learning: When updating AI SDK packages (ai, ai-sdk/*), always check for outdated versions using 'pnpm outdated -r --json' and look specifically for entries with 'ai' and 'ai-sdk/*'.
Applied to files:
package.json
📚 Learning: 2025-07-21T22:29:32.130Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/update-ai-sdk.mdc:0-0
Timestamp: 2025-07-21T22:29:32.130Z
Learning: Applies to **/*.{ts,tsx} : If breaking changes are introduced in new AI SDK versions, update code to accommodate those changes
Applied to files:
packages/transactional-email/tsconfig.json
📚 Learning: 2025-06-10T04:50:58.670Z
Learnt from: shige
Repo: giselles-ai/giselle PR: 1081
File: docs/packages-license.md:13208-13213
Timestamp: 2025-06-10T04:50:58.670Z
Learning: The file `docs/packages-license.md` is automatically generated and should not be reviewed.
Applied to files:
docs/packages-license.md
📚 Learning: 2025-07-21T22:29:27.078Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: .cursor/rules/nodejs.mdc:0-0
Timestamp: 2025-07-21T22:29:27.078Z
Learning: Giselle requires Node.js version 22.14.0 or later
Applied to files:
docs/packages-license.md
📚 Learning: 2025-09-02T05:50:06.317Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: internal-packages/workflow-designer-ui/src/new-editor/AGENTS.md:0-0
Timestamp: 2025-09-02T05:50:06.317Z
Learning: Applies to internal-packages/workflow-designer-ui/src/new-editor/**/*.tsx : Use shallow equality for arrays/objects (prefer useEditorStoreWithEqualityFn(selector, shallow)) to avoid false-positive updates.
Applied to files:
docs/packages-license.md
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail-footer-menu.tsx : If using resolved user data, remove Suspense/use() calls in the footer menu
Applied to files:
docs/packages-license.md
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Applies to apps/studio.giselles.ai/app/stage/ui/navigation-rail/**/navigation-rail.tsx : If moving away from Suspense-based user loading, change prop to user: UserDataForNavigationRail
Applied to files:
docs/packages-license.md
📚 Learning: 2025-05-29T03:01:59.684Z
Learnt from: satococoa
Repo: giselles-ai/giselle PR: 980
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/generation-panel.tsx:80-83
Timestamp: 2025-05-29T03:01:59.684Z
Learning: TailwindCSS v4.x introduced valid `**:` syntax for styling all descendants. The `**:utility` prefix applies styles to all nested descendant elements recursively, while `*:utility` only targets direct children. For example, `**:data-header-text:font-[700]` correctly applies font-weight 700 to all descendant elements with the data-header-text attribute.
Applied to files:
docs/packages-license.md
📚 Learning: 2025-05-29T03:01:59.684Z
Learnt from: satococoa
Repo: giselles-ai/giselle PR: 980
File: internal-packages/workflow-designer-ui/src/editor/properties-panel/query-node-properties-panel/generation-panel.tsx:80-83
Timestamp: 2025-05-29T03:01:59.684Z
Learning: In TailwindCSS v4.x, the `**:` prefix is valid syntax for styling all descendants. For example, `**:data-header-text:font-[700]` is correct syntax that applies font-weight 700 to all descendant elements with the data-header-text attribute.
Applied to files:
docs/packages-license.md
📚 Learning: 2025-09-01T00:43:10.540Z
Learnt from: CR
Repo: giselles-ai/giselle PR: 0
File: apps/studio.giselles.ai/app/stage/ui/navigation-rail/AGENTS.md:0-0
Timestamp: 2025-09-01T00:43:10.540Z
Learning: Ensure Tailwind utilities w-navigation-rail-{collapsed,expanded} map to the tokens via design tokens/Tailwind config
Applied to files:
docs/packages-license.md
🪛 markdownlint-cli2 (0.18.1)
docs/packages-license.md
12088-12088: Bare URL used
(MD034, no-bare-urls)
12089-12089: Blank line inside blockquote
(MD028, no-blanks-blockquote)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: check
🔇 Additional comments (9)
packages/transactional-email/.react-email/config.json (1)
1-3: LGTM! React Email configuration is correct.The configuration correctly maps the email templates directory to
emails, which aligns with the package structure and is referenced in the README and other configuration files.packages/transactional-email/tsconfig.json (1)
1-8: LGTM! TypeScript configuration is well-structured.The configuration correctly extends the shared React library config, includes the
emailsdirectory for compilation, and excludes the appropriate build artifacts and dependencies.packages/transactional-email/README.md (1)
1-59: LGTM! Documentation is clear and comprehensive.The README provides excellent documentation covering all essential aspects:
- Setup and installation instructions
- Development workflow with the preview server
- Template creation with a practical example
- Export functionality
- Links to official resources
The example code demonstrates proper usage of React Email components and follows TypeScript best practices.
package.json (1)
49-50: LGTM! React type definition overrides are appropriate.The pnpm overrides for
@types/react(19.1.10) and@types/react-dom(19.1.7) ensure consistent type definitions across the monorepo. These versions align with React 19 requirements and support the new transactional-email package.turbo.json (1)
39-39: LGTM! Build output configuration correctly extended.Adding
out/**to the build outputs is necessary to track the static HTML exports from the new transactional-email package. This ensures proper caching by Turborepo when email templates are exported.knip.ts (2)
87-89: LGTM! Duplicate issues ignored for email templates.Ignoring duplicate code warnings for email templates is reasonable, as templates often share similar structural patterns and styling code. This prevents noisy warnings while maintaining code quality checks elsewhere.
118-121: The react-dom ignore rule is correct.Verification confirms that
react-domis not imported or used in any email template files. Thesample.tsxtemplate only imports from@react-email/components. Since knip's entry point analysis scans the email templates and would flag unused dependencies, ignoringreact-domis appropriate—it's required by the React Email tooling infrastructure (preview server, export CLI) but not directly referenced in template code. This matches the pattern of also ignoring@react-email/preview-server.packages/transactional-email/package.json (1)
14-17: The review comment is based on an incorrect assumption.The
react-emailpackage does not list@react-email/componentsas a dependency, indicating these are independent packages designed to be versioned separately. Both versions (@react-email/[email protected]and[email protected]) are valid published versions. The version number difference does not indicate incompatibility—this is normal for loosely coupled packages in the same ecosystem.Likely an incorrect or invalid review comment.
config/dependency_decisions.yml (1)
111-117: Approval for [email protected] is correct and properly documented.[email protected] is confirmed as a direct dependency of @react-email/[email protected], which is included in
packages/transactional-email/package.json. Security verification found no vulnerabilities for this version, and the package was last published approximately 11 years ago, making 0.0.5 the only available version. @react-email/[email protected] remains actively maintained, having been published a week ago. The approval correctly identifies this as an indirect dependency with MIT licensing, and no concerns remain.
| SampleEmail.PreviewProps = { | ||
| username: "Alice", | ||
| } as SampleEmailProps; |
There was a problem hiding this comment.
Fix TS: add a static-member-friendly component type before assigning PreviewProps.
Property 'PreviewProps' does not exist on type '(props: SampleEmailProps) => JSX.Element'. Type the component as a function intersected with the static shape, then assign.
interface SampleEmailProps {
username?: string;
}
-export const SampleEmail = ({ username = "there" }: SampleEmailProps) => {
+type SampleEmailComponent = ((props: SampleEmailProps) => JSX.Element) & {
+ PreviewProps: SampleEmailProps;
+};
+
+export const SampleEmail: SampleEmailComponent = ({
+ username = "there",
+}: SampleEmailProps) => {
return (
<Html>
<Head />
<Preview>Welcome to Giselle!</Preview>
<Body style={main}>🤖 Prompt for AI Agents
In packages/transactional-email/emails/sample.tsx around lines 33 to 35, the
component is currently typed as a plain function so assigning
SampleEmail.PreviewProps errors; change the component's type to a function type
intersected with the static-member shape (e.g., React.FC<SampleEmailProps> & {
PreviewProps?: SampleEmailProps }) so it can hold static properties, then assign
SampleEmail.PreviewProps = { username: "Alice" } after the component definition.
Ensure the appropriate React types are imported if not already.
I took inspiration from React Email's monorepo structure and thought that having an independent package would be easier to implement in a design-first way, so I did it this way.
Other than that, I don't have any particular preferences, so if it's better to move it to apps/studio.giselles.ai, I'll do that! |
Move email templates from standalone package to apps/studio.giselles.ai, following the same pattern as drizzle configuration. This treats email templates as app-specific infrastructure rather than a shared package. Changes: - Move emails/ and .react-email/ from packages/transactional-email to apps/studio.giselles.ai - Add @react-email dependencies to studio.giselles.ai package.json - Add email:dev and email:export scripts to studio.giselles.ai - Update knip.ts to configure email templates in studio app workspace - Remove packages/transactional-email This aligns with the "less is more" philosophy - keeping things simple and avoiding unnecessary abstraction until multiple apps need email templates.
shige
changed the title
I did it! 823b419 |
User description
Summary
apps/studio.giselles.aiusing React EmailDetails
This PR introduces email template functionality directly in the studio.giselles.ai app using React Email, following the
same pattern as drizzle (app-specific infrastructure rather than shared package).
Email template features:
http://localhost:3333Location rationale:
Email templates are placed in
apps/studio.giselles.ai/emails/(same granularity as drizzle configuration) rather than aseparate package, following the "less is more" principle. If other apps need email templates in the future, we can
extract to a shared package then.
Type conflict resolution:
To resolve type conflicts introduced by React Email dependencies pulling in older React type versions, this PR adds pnpm
overrides for
@types/[email protected]and@types/[email protected]to ensure consistency across all packages in themonorepo.
Usage
Test plan
Reference
PR Type
Enhancement
Description
Add new
@giselles-ai/transactional-emailpackage for React Email templatesConfigure development server for local email template preview
Include sample email template and TypeScript configuration
Approve spamc license dependency from React Email preview server
Diagram Walkthrough
File Walkthrough
5 files
Define email package dependencies and scriptsConfigure TypeScript for email packageConfigure React Email preview serverConfigure Knip for transactional email packageAdd email export output to Turbo cache1 files
Create sample welcome email template1 files
Document package setup and usage guide1 files
Approve spamc license dependency1 files
Note
Add React Email templates with local preview/export to
apps/studio.giselles.ai, plus build/config tweaks, React types overrides, and license approval.apps/studio.giselles.ai):.react-email/config.json),emails/directory with README andsample.tsx.email:dev(preview on 3333) andemail:export(static HTML).out/**in build outputs.emails/**/*.tsxas entry; ignore duplicates inemails/; ignore preview-server/react-dom deps.@types/[email protected]and@types/[email protected]via pnpm overrides.spamcinconfig/dependency_decisions.yml.docs/packages-license.mdto reflect new dependencies/licenses.Written by Cursor Bugbot for commit 823b419. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
New Features
Documentation
Chores