Add Storybook Playwright testing rules using new Cursor directory pattern

[codegen-sh]

Overview

This PR adds comprehensive Storybook Playwright testing rules using the new Cursor rules directory pattern. The rules provide AI-optimized guidance for writing effective tests that ensure working code in the lambda-curry/forms repository.

What's Included

🗂️ Modern Cursor Rules Structure

• .cursor/rules/storybook-testing.mdc - Following the new Cursor rules best practices
• MDC format with proper metadata (type: Always)
• Directory-based organization for better maintainability
• Version-controlled rules that can be shared across the team

🎯 Key Patterns Documented

• Three-phase testing: Default state → Invalid submission → Valid submission
• Dual-purpose stories: Components serve as both documentation and automated tests
• Real browser testing: Tests run in actual Chromium with user interactions
• Integration focus: Test complete workflows, not isolated units

🛠️ Essential Code Elements

• Required imports and setup patterns
• Form schema and component wrapper templates
• React Router stub decorator configuration
• User interaction best practices with proper async handling

⚠️ Deprecated Patterns Prevention

• Clear warnings about what NOT to use
• Common pitfalls and their solutions
• Explicit guidance on proper async testing patterns
• Form submission best practices

✅ Verification Framework

• Checklist for ensuring proper test implementation
• Quality gates for story creation
• Debugging guidance for common issues
• Environment setup requirements

Testing Setup Analysis

The repository uses a sophisticated testing stack:

• Storybook 8.6.7 with React and Vite
• @storybook/test-runner for Playwright automation
• React Router stub decorator for form handling
• Remix Hook Form + Zod for validation testing

Benefits for Development

This rules file enables developers to:

1. Automatically follow established testing patterns in Cursor IDE
2. Avoid common mistakes through explicit AI guidance
3. Write consistent tests using provided templates
4. Debug issues effectively with built-in troubleshooting
5. Maintain quality through verification steps

Migration from Legacy Approach

• ✅ Removed legacy .cursorrules file
• ✅ Removed codegen.md documentation file
• ✅ Migrated to .cursor/rules/ directory structure
• ✅ Converted to MDC format with metadata
• ✅ Improved organization and maintainability

File Changes

• .cursor/rules/storybook-testing.mdc - New Cursor rules file (240+ lines)
• Removed .cursorrules and codegen.md (legacy files)

The rules are now properly structured following Cursor's latest best practices and will provide consistent AI guidance for Storybook Playwright testing across the entire development team.

---

💻 View my work • About Codegen

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Join our Discord community for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

📝 Storybook Preview: View Storybook

This preview will be updated automatically when you push new changes to this PR.

Note: The preview will be available after the workflow completes and the PR is approved for deployment.

[jaruesink]

@codegen-sh let's convert this into a cursor rule, look up the cursor rule directory best practices for reference.

I'll convert this into a cursor rule and reference best practices! 📝

💻 View my work

[codegen-sh]

Perfect! I've converted the comprehensive Storybook testing guide into a Cursor rules file! 🎨

What I Added

✅ .cursorrules file - Following Cursor rules best practices with:

• High-level project context explaining the monorepo and testing setup
• Essential code patterns with ready-to-use snippets
• Three-phase testing structure clearly defined
• Deprecated patterns explicitly marked as "DO NOT USE"
• Verification steps for ensuring proper test implementation
• Common pitfalls and their solutions

Key Features of the Cursor Rules

🔧 Essential Code Elements:

• Required imports and setup patterns
• Form schema and component wrapper templates
• React Router stub decorator configuration
• User interaction best practices

⚠️ Deprecated Patterns (clearly marked):

• Using getBy* for async elements
• Clearing inputs without clicking first
• Using regular forms instead of fetcher.Form
• Testing multiple scenarios in one story

✅ Verification Checklist:

• Story includes all three test phases
• Uses proper async assertions
• Follows click-before-clear pattern
• Tests both client and server validation

How It Works

The .cursorrules file will now guide Cursor IDE users to:

1. Automatically follow the established testing patterns
2. Avoid common mistakes through explicit warnings
3. Use consistent code structure with provided templates
4. Implement proper verification steps

🔗 Updated PR: View PR #71 now includes both the comprehensive guide AND the Cursor rules!

This gives you the best of both worlds - detailed documentation for humans and AI-optimized rules for Cursor IDE! 🚀

💻 View my work • React 👍 or 👎

[jaruesink]

@codegen-sh this isn't using the new cursor rule directory best practices https://docs.cursor.com/context/rules

Let's use the new directory pattern and remove the codegen.md file also

I'll update to the new directory pattern and remove codegen.md! 🗂️

💻 View my work

[codegen-sh]

Perfect! I've migrated to the new Cursor rules directory pattern! 🗂️

What I Changed

✅ Removed legacy files:

• .cursorrules (old format)
• codegen.md (documentation file)

✅ Created modern structure:

• .cursor/rules/storybook-testing.mdc (new MDC format)
• Proper metadata with type: Always
• Directory-based organization

Key Benefits of New Approach

🎯 Better Organization:

• Version-controlled rules in proper directory
• MDC format with metadata support
• Can be shared across team projects

🔧 Enhanced Functionality:

• type: Always ensures rules are always applied
• Better integration with Cursor IDE
• More maintainable and discoverable

📚 Follows Best Practices:

• Under 500 lines (as recommended)
• Focused and actionable guidance
• Concrete examples and patterns
• Clear verification steps

Updated PR

🔗 View PR #71 now uses the modern Cursor rules approach!

The rules will now automatically guide Cursor IDE users to write consistent, high-quality Storybook Playwright tests following your established patterns. Much cleaner and more maintainable! 🚀

💻 View my work • React 👍 or 👎